How to append <option> tags to a <select> statement in a for loop?

Question

I am trying to dynamically populate <option> tags within a <select> menu, however I am having trouble doing so. The way I want to do this is in a for loop, where JS cycles through however many options there are, and appends the options to the select tag.

The bit of code that doesn't work (I reckon) is this bit: (all relevant code is below)

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

I want it to cycle through and, if count = 2 for example, append the options.

So when i = 0 it will do: item.appendChild((option1)); and when i = 1 it will do item.appendChild(option2); to my <select id='_second'> menu

Im not sure what's going on, if someone could give me a sense of direction, that'd be much appreciated.

//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

One option would be to build up an array of options like this: 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);

Here is it working... https://jsfiddle.net/ucp9jgnh/1/ Should do the trick... Not a great way to do it, but it will at least work

In this example, option2 is the answer...

parseInt(i+1, 10) ...that part will make sure it's i (your loop) +1 in a math format. Then it adds that to "option" text, and eval() then allows JS to look at it as a variable instead of a string.

If you change var i = 0, it will instead output 'test' instead of 'test2' because of the math.

Here is what you would do inside your loop... Should work as is:

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