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"?

• mechanical_meat: Please post your attempt and any error message(s) you're getting. Thank you.

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>

• Abdallah Okasha: I've got an error textContent & value are not a function and the solution was to cast opt to String like that: el.textContent = String(opt); el.value = String(opt); that's in case of opt isn't String.
• Alex Turpin: @AbdallahOkasha That doesn't make sense. That error would happen if you tried to use el.textContent like this: el.textContent(opt). If you use it like in my exmaple, it doesn't matter if it's a number the browsers will turn it into a string.
• Abdallah Okasha: Thanks for caring .. actually, I've tried to write el.textContent = arr[i] or el.value = arr[i] and i have got an error said: value, text and textContent are not functions.
• Alex Turpin: @AbdallahOkasha can you reproduce a minimal example of this error on something like jsfiddle.net and share a link?
• Abdallah Okasha: This's jsfiddle snippet @alex in this example .text function works well without parsing to string, however in my code it gives me an error i am actually using similar array of string (each contains white spaces). jsfiddle.net/okasha/h1jt3yz1/2

Answer 2

You can also do it with jQuery:

var options = ["1", "2", "3", "4", "5"];
$('#select').empty();
$.each(options, function(i, p) {
 $('#select').append($('<option></option>').val(p).html(p));
});

Answer 3

I used Alex Turpin's solution with small corrections as mentioned below:

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.text = opt;
 el.value = opt;
 select.add(el);
}​

Corrections because with the appendChild() function it loads when the DOM prepares. So It's not working in old (8 or lesser) IE versions. So with the corrections it's working fine.

Some notes on the differences between add() and appendChild().

Answer 4

I found this also works...

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 
// Optional: Clear all existing options first:
select.innerHTML = "";
// Populate list with options:
for(var i = 0; i < options.length; i++) {
 var opt = options[i];
 select.innerHTML += "<option value=\"" + opt + "\">" + opt + "</option>";
}

Answer 5

You'll first get the dropdown element from the DOM, then loop through the array, and add each element as a new option in the dropdown like this:

var myArray = new Array("1", "2", "3", "4", "5");
// Get dropdown element from DOM
var dropdown = document.getElementById("selectNumber");
// Loop through the array
for (var i = 0; i < myArray.length; ++i) {
 // Append the element to the end of Array list
 dropdown[dropdown.length] = new Option(myArray[i], myArray[i]);
}

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

This assumes that you're not using JQuery, and you only have the basic DOM API to work with.

• Niels Brinch: Note, I ran into this problem when I copy-pasted this code: stackoverflow.com/questions/4404526/…
• DashK: @NielsBrinch - Don't copy-and-paste directly from JSFiddle. :)
• Niels Brinch: I actually copy-pasted from Stackovervflow, not the fiddle - but maybe the stackoverflow author copy-pasted from his own fiddle and the copy-paste got carried over! :)
• DashK: @NielsBrinch - What was the error? Was it "dropdown is undefined"?
• Niels Brinch: No, it was exactly the one I linked to. "Unexpected token ILLEGAL" in webkit.

Answer 6

Something like this should work:

var dropdown = document.getElementById("dropdown1");
if (dropdown) {
 for (var i=0; i < month.length;++i){ 
 addOption(dropdown, month[i], month[i]);
 }
}
addOption = function(selectbox, text, value) {
 var optn = document.createElement("OPTION");
 optn.text = text;
 optn.value = value;
 selectbox.options.add(optn); 
}

You can refer to this article for more details:
http://www.plus2net.com/javascript_tutorial/list-adding.php

Answer 7

["1","2","3","4"].forEach( function(item) { 
 const optionObj = document.createElement("option");
 optionObj.textContent = item;
 document.getElementById("myselect").appendChild(optionObj);
});

Answer 8

Using template literals would be:

const arr = [1,2,3,4]
var options = arr.map(e=>{return `<option value="${e}">${e}</option>`})
document.getElementById("selectNumber").innerHTML = options.join('')
//document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options);

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

• jgarcias: Beautiful, compact and simple solution.
• mplungjan: Or even document.getElementById("selectNumber = arr.map(val => `<option value="${val}">${val}</option>`); - I would reserve the variable e for event
• jleviaguirre: Even better! 👍
• hostingutilities.com: This results in commas in between all the option elements because you're implicitly converting the array to a string. It doesn't seem to show the commas to the end user, but still, I would replace the = options in this answer with = options.join('')
• jleviaguirre: @mplungian: another alternative for the last statement is to insert the array to the select like this: document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options)

Answer 9

Here is my answer:

var options = ["1", "2", "3", "4", "5"];
for(m = 0 ; m <= options.length-1; m++){
 var opt= document.createElement("OPTION");
 opt.text = options[m];
 opt.value = (m+1);
 if(options[m] == "5"){
 opt.selected = true;}
document.getElementById("selectNum").options.add(opt);}

• Kurt Van den Branden: This is a code only answer. Please add some explanation what your code is doing.

Answer 10

If you're working with React and JSX, you can use the map function. Then you don't need to add DOM nodes manually.

const numsarray = [1, 2, 3, 4, 5];

You can map this into your <options> tag (within <select>)

<select>
 {numsarray.map((num) => (
 <option>{numsarray}</option>
 ))}
</select>

Answer 11

var test = document.getElementById("TestOption");
var arr = ["A","B","C","D"]; 
//remove options if necessary
for(var i=test.options.length- 1;i>= 0;i--) {test.remove(i);} 
//add new options
for(i in arr) {test.add(new Option(arr[i],i));}

• OJVM: Thank you, I was looking for a method to remove before append elements.

Answer 12

var list =["muez","devomech","solution"]
var option = "";
 for(var i=0; i<list.length; i++){
 option+= '<option value="'+ list[i] +'">' + list[i] + "</option>"
 
 }
 document.getElementById("deviceoption").innerHTML = option;

<select id="deviceoption"></select>

`

Answer 13

<form id="myForm">
<select id="selectNumber">
 <option>Choose a number</option>
 <script>
 var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N");
 for(i=0; i<myArray.length; i++) { 
 document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>');
 }
 </script>
</select>
</form>

Answer 14

Simple jQuery solution that is easy to debug:

<form id="myForm">
 <select id="selectNumber">
 <option>Choose a number</option>
 </select>
</form>
<script>
 var myArray = ["1", "2", "3", "4", "5"];
 for (let i = 0; i < myArray.length; i++) {
 $("#selectNumber").append("<option value='" + myArray[i] + "'>" + myArray[i] + "</option>");
 }
</script>