[Solved] JavaScript – populate drop down list with array

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

Solution #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);
}?

Live example

Respondent: Alex Turpin

Solution #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));
});
Respondent: Jaco B

Solution #3:

I had the same requirement, I used “Alex Turpin” 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 is 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.

Thanks Alex for your solution.

Some notes on differences b/w add() and appendChild()

Respondent: Sairam Kukadala

Solution #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>";
}
Respondent: Tim D

Solution #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:

// 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]);
}?

See JSFiddle for a live demo: http://jsfiddle.net/nExgJ/

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

Respondent: DashK

Solution #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

Respondent: James Johnson

Solution #7:

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

Solution #8:

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);}

Solution #9:

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>
Respondent: vaba-huo

Solution #10:

<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>
Respondent: vladschwartz

Solution #11:

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>
Respondent: Zaffer

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.