更新

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 events上阅读一下。在您选择了某些内容之前，select上的更改事件不会启动。而且由于你没有什么可以选择，事件不会开火。

您可以在onclick运行该功能，或者在DOM准备就绪时运行该功能。

我已更新了您的fiddle。

使用Javascript动态添加选择选项

3 个答案:

更新