JavaScript - populate drop down list with array

Question

I have an array declared in a script:

var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N"); 

I have a form which contains a drop down menu:

<form id="myForm">   <select id="selectNumber">     <option>Choose a number</option>   </select> </form> 

Using Javascript, how will I populate the rest of the drop down menu with the array values? So that the options will be "Choose a number", "1", "2", "3", "4", "5" . . . . . "N"?

Answer 1

You'll need to loop through your array elements, create a new DOM node for each and append it to your object:

var select = document.getElementById("selectNumber"); var options = ["1", "2", "3", "4", "5"];  for(var i = 0; i < options.length; i++) {     var opt = options[i];     var el = document.createElement("option");     el.textContent = opt;     el.value = opt;     select.appendChild(el); }

<select id="selectNumber">     <option>Choose a number</option> </select>