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

Please post your attempt and any error message(s) you're getting. Thank you. — mechanical_meat, Mar 27 '12 at 18:11

score 141 · Answer 1 · edited Nov 07 '21 at 08:40

141

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>

edited Nov 07 '21 at 08:40

Tomerikoo

18,379
16
47
61

answered Mar 27 '12 at 18:13

Alex Turpin

46,743
23
113
145

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**_. – Abdallah Okasha Jan 08 '18 at 10:30
@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. – Alex Turpin Jan 08 '18 at 16:29
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**. – Abdallah Okasha Jan 09 '18 at 10:27
@AbdallahOkasha can you reproduce a minimal example of this error on something like http://jsfiddle.net/ and share a link? – Alex Turpin Jan 09 '18 at 21:12
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). https://jsfiddle.net/okasha/h1jt3yz1/2/ – Abdallah Okasha Jan 15 '18 at 09:32
@AbdallahOkasha You are using `text` and not `textContent` in those examples. And both examples seem to work without giving an error. – Alex Turpin Jan 16 '18 at 16:30

score 68 · Answer 2 · answered Sep 19 '15 at 11:25

68

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

answered Sep 19 '15 at 11:25

Jaco B

994
7
16

score 18 · Answer 3 · edited Nov 07 '21 at 08:42

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().

Tim D · Answer 4 · 2016-01-15T01:38:27.830

13

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

edited Jan 15 '16 at 01:38

answered Dec 20 '15 at 02:15

Tim D

650
1
12
18

score 13 · Answer 5 · edited Nov 07 '21 at 08:45

13

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.

edited Nov 07 '21 at 08:45

Tomerikoo

18,379
16
47
61

answered Mar 27 '12 at 18:18

DashK

2,640
1
22
28

Note, I ran into this problem when I copy-pasted this code: http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Niels Brinch Apr 11 '13 at 19:42
1

@NielsBrinch - Don't copy-and-paste directly from JSFiddle. :) – DashK Apr 11 '13 at 22:28
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! :) – Niels Brinch Apr 12 '13 at 08:11
@NielsBrinch - What was the error? Was it "dropdown is undefined"? – DashK Apr 12 '13 at 15:36
No, it was exactly the one I linked to. "Unexpected token ILLEGAL" in webkit. – Niels Brinch Apr 13 '13 at 00:29

score 8 · Answer 6 · answered Mar 27 '12 at 18:15

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

Peter Aron Zentai · Answer 7 · 2020-10-30T00:14:14.120

8

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

edited Oct 30 '20 at 00:14

answered Mar 27 '12 at 18:16

Peter Aron Zentai

11,482
5
41
71

score 4 · Answer 8 · answered Dec 21 '20 at 19:16

4

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

answered Dec 21 '20 at 19:16

Abdelghafour Lahrache

41
3

1

This is a code only answer. Please add some explanation what your code is doing. – Kurt Van den Branden Dec 21 '20 at 19:37

jleviaguirre · Answer 9 · 2023-08-24T15:42:31.090

4

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>

edited Aug 24 '23 at 15:42

answered Jul 04 '22 at 04:38

jleviaguirre

686
6
10

Beautiful, compact and simple solution. – jgarcias Oct 21 '22 at 01:13
Or even `document.getElementById("selectNumber = arr.map(val => \`\`);` - I would reserve the variable `e` for event – mplungjan Nov 22 '22 at 06:50
Even better! – jleviaguirre Nov 23 '22 at 21:24
2

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('')` – hostingutilities.com Aug 08 '23 at 19:17
@mplungian: another alternative for the last statement is to insert the array to the select like this: document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options); – jleviaguirre Aug 24 '23 at 15:41

score 3 · Answer 10 · answered Jun 03 '21 at 05:17

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>

score 3 · Answer 11 · answered Jul 28 '21 at 13:55

3

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

answered Jul 28 '21 at 13:55

InformediaDev

31
1

Thank you, I was looking for a method to remove before append elements. – OJVM Mar 15 '22 at 18:37

score 1 · Answer 12 · answered Nov 06 '21 at 21:05

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>

`

vladschwartz · Answer 13 · 2013-10-17T01:13:47.863

0

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

edited Oct 17 '13 at 01:13

answered Oct 17 '13 at 00:36

vladschwartz

11
1

score 0 · Answer 14 · answered Apr 24 '21 at 18:53

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>

JavaScript - populate drop down list with array

14 Answers14

Linked

Related