使用JavaScript循环遍历下拉HTML数组

Question

我正在尝试使用JavaScript数组填充一个下拉菜单。我可以使单个元素显示出来，但无法使整个数组显示。我确信这个问题以前已经被问过，但找不到任何参考资料。希望能得到帮助。

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

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

HTML 是：

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

- David

---

当前代码在每次迭代中都会覆盖列表。 - Alex

我应该如何修复它？ - David

你尝试过使用for each循环吗？类似于for（index in array）。你也可以尝试使用for...of，但它不兼容IE。 - LucaApo

Answer 1

请���下面一种不太优雅的解决方法。如果您使用JQuery库，可以重构代码使其更美观，例如请参见如何使用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>

- Alex

---

这个完美地运作了。它将为我节省大量编写冗余代码的工作。谢谢。 - David

Answer 2

这是我通常使用的有效方法： Codepen演示 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("");

- Larry Lane

---

再试一次（第一次没有成功）……这太完美了。感谢大家的建议。 - David

Answer 3

使用模板库，如underscore、handlebars或mustache。从JavaScript生成HTML是一种不好的做法。

- Bhushankumar Lilapara

---

你能详细说明为什么你认为从JavaScript生成HTML是不好的实践吗？underscore、handlebars和mustache是否使用JavaScript？ - Larry Lane

你可以在谷歌上搜索，会得到很多关于这个问题的答案。https://dev59.com/qHM_5IYBdhLWcg3wp0-l - Bhushankumar Lilapara