如何将 <option> 标签附加到 for 循环中的 <select> 语句？

Question

我正在尝试在<select> 菜单中动态填充<option> 标签，但是我在这样做时遇到了麻烦。我想要这样做的方式是在一个 for 循环中，其中 JS 循环遍历有许多选项，并将选项附加到 select 标记。

不起作用的代码位（我认为）是这一位：（所有相关代码都在下面）

        for (var i = 0; i < count; i++) {
            //how can I do this part?
            item.appendChild((option + i + 1));
        }

我希望它循环显示，例如，如果 count = 2 附加选项。

所以当i = 0 时它会做：item.appendChild((option1)); 而当i = 1 它会做item.appendChild(option2); 到我的<select id='_second'> 菜单

我不确定发生了什么，如果有人能给我一个方向感，那将不胜感激。

//Javascript
    myFunction = () => {
        //get value of selected <option> in a separate <select> drop down
        var type = document.getElementById('_first').value;
        //get the second <select>
        var item = document.getElementById('_second');
        //set count variable to know how many <options> there should be in second <select> drop down
        var count;
        //assess value
        switch (type) {
            case '1': //First case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText1';
                count = 1;
                break;
            case '2': //Second case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText2';
                var option2 = document.createElement('option');
                    option2.text = 'SomeText3';
                count = 2;
                break;
            case '3': //Third case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText4';
                var option2 = document.createElement('option');
                    option2.text = 'SomeText5';
                var option3 = document.createElement('option');
                    option3.text = 'SomeText6';
                count = 3;
                break;
        }
        //populate select menu
        for (var i = 0; i < count; i++) {
            //how can I do this part?
            item.appendChild((option + i + 1));
        }
    }

//HTML

<p>Select Something:</p>

<div style="width:50%;">
        First Menu: <br>
        <select id='_first' required>
            <option value='0'>Select Type:</option>
            <option value='1'>First Option</option>
            <option value='2'>Second Option</option>
            <option value='3'>Third Option</option>
        </select>
</div>
<div style="width:50%;">
        Dynamic Second Menu: <br>
        <select id='_second'>
            <!-- Doesn't populate! &sadface; -->
        </select>
</div>

Answer 1

一种选择是建立一个这样的选项数组：https://codepen.io/anon/pen/jpbKBx

//Javascript
    function myFunction () {

        //get value of selected <option> in a separate <select> drop down
        var type = document.getElementById('_first').value;
        //get the second <select>
        var item = document.getElementById('_second');

        //Clear child nodes from dynamic <select>
        while (item.hasChildNodes()) {
            item.removeChild(item.lastChild);
        }

        //set count variable to know how many <options> there should be in second <select> drop down
        var count;
        var options = [];
        //assess value
        switch (type) {
            case '1': //First case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText1';
                options.push(option1);
                break;
            case '2': //Second case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText2';
                options.push(option1);
                var option2 = document.createElement('option');
                    option2.text = 'SomeText3';
                options.push(option2);
                break;
            case '3': //Third case
                var option1 = document.createElement('option');
                    option1.text = 'SomeText4';
                options.push(option1);
                var option2 = document.createElement('option');
                    option2.text = 'SomeText5';
                options.push(option2);
                var option3 = document.createElement('option');
                    option3.text = 'SomeText6';
                options.push(option3);
                break;
        }

        //populate select menu
        for (var i = 0; i < options.length; i++) {
            //how can I do this part?
            item.appendChild((options[i]));
        }
    }

Answer 2

var i = 1; 
var option1 = 'test';
var option2 = 'test2';
var number = eval("option"+parseInt(i+1, 10)); 
console.log(number);

它工作了吗...https://jsfiddle.net/ucp9jgnh/1/ 应该做的伎俩...不是一个很好的方法，但它至少可以工作

在本例中，选项 2 是答案...

parseInt(i+1, 10) ...该部分将确保它是数学格式的 i（您的循环）+1。然后它将它添加到“选项”文本中，然后 eval() 允许 JS 将其视为变量而不是字符串。

如果您更改 var i = 0，由于数学原因，它将改为输出“test”而不是“test2”。

这是你在循环中要做的事情......应该按原样工作：

var appendedThing = eval("option"+parseInt(i+1, 10));
item.appendChild(appendedThing);