使用javascript循环下拉html数组

我试图用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>

---

请参阅下面对您的问题的非优雅修复。 如果你使用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>

---

这是我通常使用的方法：

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

---

使用模板库，如下划线或把手或小胡子。 它不好的做法，从JavaScript生成HTML。

链接地址: http://www.djcxy.com/p/47903.html

上一篇: using javascript to loop through drop down html array

下一篇: How to correctly return html template from ajax request with Symfony