0

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

music-code
  • 59
  • 7
  • 1
    Possible duplicate of [Adding options to a – Jeremy J Starcher May 13 '16 at 17:33

3 Answers3

0

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>
bwegs
  • 3,769
  • 2
  • 30
  • 33
  • I tried this jsfiddle and its still not loading correctly....https://jsfiddle.net/nvzwx46g/3/ – music-code May 13 '16 at 18:50
  • @user1805086 Place all the code from my answer directly in the html section and it will work properly --> https://jsfiddle.net/nvzwx46g/8/ – bwegs May 13 '16 at 19:46
0

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;
  }
user1554966
  • 383
  • 1
  • 3
  • 7
0

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.

aifrim
  • 555
  • 9
  • 20