使用Javascript动态添加选择选项

So I've been working on trying to populate a select tag options with JavaScript. I can't seem to figure out why my function isn't working any help would be greatly appreciated.

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

My HTML code:

我的HTML代码:

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

And my JavaScript function:

我的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;
  }

}

Thanks again

3 个解决方案

#1

I would go with something like. Is not really tested but am pretty sure is more reliable.

我会选择类似的东西。没有真正测试,但我相信更可靠。

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;
  }  

#2

You're attempting to create an object instead of an array here:

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

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

Curly braces - {} are used to denote that you are creating an object.

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

Brackets - [] are used to denote an array.

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

Try populating your select element as it's being created with something like this:

尝试使用以下内容创建选择元素:

<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>

#3

Firstly, you have a huge error.

首先,你有一个巨大的错误。

You don't use { and } in javascript to create arrays.

您不要在javascript中使用{和}来创建数组。

Use:

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

Here is your final code:

这是你的最终代码:

<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>

Update

If you want it to work on JSFiddle firstly you need to make your function globally available because JSFiddle runs it at domready. To make it globally available just write it like this: window.choseOption = function() { /* code here */ };.

如果你希望它首先在JSFiddle上工作,你需要让你的函数全局可用,因为JSFiddle在domready上运行它。要使它全局可用,只需像这样写:window.choseOption = function(){/ * code here * /};。

You should read a bit on DOM events. The change event on that select won't fire up until you have selected something. And since you have nothing to select the event will not fire.

你应该读一下DOM事件。在您选择了某些内容之前,该选择的更改事件将不会启动。而且由于你没有什么可以选择的事件不会开火。

You can run the function at onclick or just run it when the DOM is ready.

您可以在onclick上运行该函数,或者在DOM准备就绪时运行它。

I have updated your fiddle.

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