I'm trying to populate a drop down menu with a javascript array. I can get individual elements to show up but not the entire array. I'm sure this question has been asked before, but can't find any references. Any help would be appreciated.

var sex=["male","female", "unknown"];

for (i=0;i<sex.length;i++){
var opt = document.createElement("option");
document.getElementById("m").innerHTML=sex[i];
}

The html is:

    <form name = "demo">
    <table id = "demo">
    <th>Demographics</th>
    <tr><td>Sex</td><td><select><option id="m"></option></select></td></tr>
    </table>
    </form>

I'm trying to populate a drop down menu with a javascript array. I can get individual elements to show up but not the entire array. I'm sure this question has been asked before, but can't find any references. Any help would be appreciated.

var sex=["male","female", "unknown"];

for (i=0;i<sex.length;i++){
var opt = document.createElement("option");
document.getElementById("m").innerHTML=sex[i];
}

The html is:

    <form name = "demo">
    <table id = "demo">
    <th>Demographics</th>
    <tr><td>Sex</td><td><select><option id="m"></option></select></td></tr>
    </table>
    </form>

• javascript
• html
• loops
• for-loop
• dropdown

• The current code overwrites the list each iteration. – Alex Commented Oct 3, 2015 at 18:23
• How would I fix that? – David Commented Oct 3, 2015 at 18:26
• Have you tried using a for each cycle? Something like for( index in array). You could also try a for...of but is not patible with IE – LucaApo Commented Oct 3, 2015 at 18:27

3 Answers 3

See below an non-elegant fix to your problem. You can refactor this to nicer looking code if you use the JQuery library, see for example What is the best way to add options to a select from an array with jQuery?

var sex = ["male", "female", "unknown"];

for (i = 0; i < sex.length; i++) {
  var opt = document.createElement("option");
  document.getElementById("m").innerHTML += '<option id="' + i + '">' + sex[i] + '</option>';
}

<form name="demo">
  <table id="demo">
    <th>Demographics</th>
    <tr>
      <td>Sex</td>
      <td>
        <select id="m">

        </select>
      </td>
    </tr>
  </table>
</form>

This is a method I typically use that works:

Codepen Demo

HTML:

<form name="demo">
  <table id="demo">
    <th>Demographics</th>
    <tr>
      <td>Sex</td>
      <td>
        <select id = "sex">

        </select>
      </td>
    </tr>
  </table>
</form>

Javascript:

//array to hold the persons sex
var sex = ["male", "female", "unknown"];

//array to store html to add to the select list
var html = [];

//loop through the array
for (var i = 0; i < sex.length; i++) {//begin for loop

  //add the option elements to the html array
  html.push("<option>" + sex[i] + "</option>")

}//end for loop

//add the option values to the select list with an id of sex
document.getElementById("sex").innerHTML = html.join("");

Use a template libary like underscore or handlebars or mustache. Its bad practice to generate html from javascript.