Dynamically Add Select Options with Javascript

Question

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.

My HTML code:

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

And my JavaScript function:

    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

Answer 1

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>

Answer 2

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

Answer 3

Firstly, you have a huge error.

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

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 */ }; .

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.

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

I have updated your fiddle .