使用Javascript动态添加选择选项

Question

因此，我一直在尝试使用JavaScript填充选择标记选项。 我似乎无法弄清楚为什么我的功能不起作用，将不胜感激。

我的HTML代码：

    <select name="options" id="options" style="width: 100px;" onchange="chooseOption(this);">
</select>

而我的JavaScript函数：

    function chooseOption(){
    var choices = {"Gym","Pool","Sports"};
    var myChoice = "";

  for(i=0; i<=choices.length; i++){
    myChoice += "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    document.getElementById("options").innerHTML = myChoice;
  }

}

再次感谢

Answer 1

您正在尝试在此处创建对象而不是数组：

var choices = {"Gym","Pool","Sports"}; // change {} to [] to create an array

花括号- {}用于表示您正在创建一个对象。

方括号- []用于表示数组。

尝试在创建select元素时填充如下所示的内容：

<select name="options" id="options" style="width: 100px;">
<script>
var choices = ["Gym","Pool","Sports"];
var myChoice = "";
for(var i=0; i < choices.length; i++) {
    myChoice += "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    document.getElementById("options").innerHTML = myChoice;
}
</script>
</select>

Answer 2

我会喜欢这样的。 尚未经过实际测试，但是可以肯定它更可靠。

var option = document.createElement("option");
  for(i=0; i<=choices.length; i++){
    option.text = choices[i];
    option.value = choices[i];
    document.getElementById("options").appendChild = myChoice;
  }  

Answer 3

首先，您有一个巨大的错误。

您无需在JavaScript中使用{和}来创建数组。

采用：

var choices = ["Gym","Pool","Sports"];

这是您的最终代码：

<script>
    function chooseOption() {
        var choices = ["Gym", "Pool", "Sports"];
        var myChoice = "";

        for (i = 0; i <= choices.length; i++) {
            myChoice += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
            document.getElementById("options").innerHTML = myChoice;
        }

    }

</script>
<select name="options" id="options" style="width: 100px;" onclick="javascript:chooseOption(this);">
</select>

更新资料

如果首先希望它在JSFiddle上运行，则需要使函数全局可用，因为JSFiddle是在domready运行它的。 要使其在全球范围内可用，只需这样编写： window.choseOption = function() { /* code here */ }; 。

您应该阅读有关DOM事件的内容 。 在您选择某项内容之前，不会触发该select的更改事件。 而且由于您无选择，因此该事件不会触发。

您可以在onclick运行该函数，也可以在DOM准备就绪时运行它。

我已经更新了你的小提琴 。