CODEWITHSUNDEEP
javascriptjquery
user3915050
user3915050

Reputation:

How to get my JS script to run when select option is changed

I have a JS script to add another select option when the first one has been selected however when I load the page and change the Value I get no result from my script I've ran it through JS Bin and there aren't any syntax errors and no warnings and now I am stuck. Is there some method of getting the result I am looking for??

here is the JS script

function bevfoo()
{
    var value  = document.getElementById("pre").value;
    var select = document.getElementById("tod");
    var tod    = document.createElement("select");
    var food   = ["one", "two"];
    var drink  = ["two", "one"];

    if(value === "Food")
    {
        for(var i = 0; i < food.length; i++)
        {
            var option = document.createElement("option");
            option.text  = food[i];
            tod.appendChild(option);
        }
    }
    else if(value === "Beverage")
    {
        for(var d = 0; d < drink.length; d++)
        {
            var option2 = document.createElement("option2");
            option2.text = drink[d];
            tod.appendChild(option2);
        }
    }
}

and my HTML code that's supposed to call the JS function that's above

<DIV ID="classification">
 <P>Food / Beverage:&nbsp;
  <SELECT NAME="class1" ID="pre" ONCHANGE="bevfoo()">
   <OPTION DISABLED>---Select One---</OPTION>
   <OPTION>Food</OPTION><OPTION>Beverage</OPTION>
  </SELECT><P>
 <P ID="tod">Time Of Day:&nbsp;</P>
</DIV>

Upvotes: 0

Views: 96

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to add the created select to the tod element

function bevfoo() {
  var value = document.getElementById("pre").value;
  var select = document.getElementById("tod");
  var tod = select.querySelector('select');
  //if the select already exists then use it, else create and append to select
  if (!tod) {
    tod = document.createElement("select");
    select.appendChild(tod)
  }
  var food = ["one", "two"];
  var drink = ["two", "one"];
    tod.innerHTML = '';

  if (value === "Food") {
   for (var i = 0; i < food.length; i++) {
      var option = document.createElement("option");
      option.text = food[i];
      tod.appendChild(option);
    }
  } else if (value === "Beverage") {
    for (var d = 0; d < drink.length; d++) {
      var option2 = new Option(drink[d])
      tod.appendChild(option2);
    }
  }
}
bevfoo();
<DIV ID="classification">
  <P>Food / Beverage:&nbsp;
    <SELECT NAME="class1" ID="pre" ONCHANGE="bevfoo()">
      <OPTION DISABLED>---Select One---</OPTION>
      <OPTION>Food</OPTION>
      <OPTION>Beverage</OPTION>
    </SELECT>
  </P>
  <P ID="tod">Time Of Day:&nbsp;</P>
</DIV>

Simplified version

var optionsMap = {
  Food: ["one", "two"],
  Beverage: ["two", "one"]
};

function bevfoo() {
    var value = document.getElementById("pre").value;
    var select = document.getElementById("tod");
    var tod = select.querySelector('select');

    //if the select already exists then use it, else create and append to select
    if (!tod) {
      tod = document.createElement("select");
      select.appendChild(tod)
    }

    tod.innerHTML = '';
    var values = optionsMap[value]
    if (values) {
      for (var i = 0; i < values.length; i++) {
        tod.appendChild(new Option(values[i]));
      }
    }
  }
  //set the initial value
bevfoo();
<DIV ID="classification">
  <P>Food / Beverage:&nbsp;
    <SELECT NAME="class1" ID="pre" ONCHANGE="bevfoo()">
      <OPTION DISABLED>---Select One---</OPTION>
      <OPTION>Food</OPTION>
      <OPTION>Beverage</OPTION>
    </SELECT>
  </P>
  <P ID="tod">Time Of Day:&nbsp;</P>
</DIV>

Upvotes: 3

Pratik
Pratik

Reputation: 1138

So the issue was that you were never attaching your select element in your dom. Just creating that element does not add it to your dom. Added the select element as a child of classification div.

Also, you had used select2 for beverages, which should have been select

Here's the fiddle for the same -

http://jsfiddle.net/mu8o7dqh/1/

function bevfoo()
{
    var classification = document.getElementById("classification");
    var value  = document.getElementById("pre").value;
    var select = document.getElementById("tod");
    var tod    = document.createElement("select");
    var food   = ["one", "two"];
    var drink  = ["two", "one"];
    classification.appendChild(tod);

    if(value === "Food")
    {
        for(var i = 0; i < food.length; i++)
        {
            var option = document.createElement("option");
            option.text  = food[i];
            tod.appendChild(option);
        }
    }
    else if(value === "Beverage")
    {
        for(var d = 0; d < drink.length; d++)
        {
            var option2 = document.createElement("option");
            option2.text = drink[d];
            tod.appendChild(option2);
        }
    }

}

Upvotes: 1

Related Questions