using javascript to loop through drop down html array

Question

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>

Have you tried using a for each cycle? Something like for( index in array). You could also try a for...of but is not compatible with IE — LucaApo
– LucaApo, Commented Oct 3, 2015 at 18:27

Community · Accepted Answer · 2017-05-23 12:06:37Z

2

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>

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 3, 2015 at 18:33

Alex

21.9k11 gold badges68 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

This works perfectly. It'll save me so much effort in writing redundant code. Thanks.

Larry Lane · Accepted Answer · 2015-10-03 18:34:29Z

1

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("");

edited Oct 3, 2015 at 18:34

answered Oct 3, 2015 at 18:26

Larry Lane

2,1811 gold badge14 silver badges18 bronze badges

1 Comment

David Over a year ago

Try this again (didn't go through the first time)... this is perfect. Thank you all for your suggestions.

Bhushankumar Lilapara · Accepted Answer · 2015-10-03 19:23:26Z

-1

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

answered Oct 3, 2015 at 19:23

Bhushankumar Lilapara

7801 gold badge13 silver badges26 bronze badges

2 Comments

Larry Lane Over a year ago

Can you elaborate why you believe it is bad practive to generate html from JavaScript. Does underscore,handlebars, and mustache use JavaScript?

Bhushankumar Lilapara Over a year ago

You can Google it, you will get lot's answers for it. stackoverflow.com/questions/1284381/…

Collectives™ on Stack Overflow

using javascript to loop through drop down html array

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related