Question

我有一个JS脚本，在选择第一个选项时添加另一个选项，但是当我加载页面并更改值时，我的脚本没有结果我已经通过JS Bin运行它并且没有＆＃39;任何语法错误，没有警告，现在我被卡住了。是否有一些方法可以获得我正在寻找的结果？

这是JS脚本

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

我的HTML代码应该调用上面的JS函数

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

Answer 1

您需要将创建的选择添加到tod元素

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>

简化版

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>

Answer 2

所以问题是你从未在你的dom中附加你的选择元素。只是创建该元素不会将其添加到您的dom中。添加了select元素作为分类div的子元素。

此外，您已将select2用于饮料，应选择

这是同样的小提琴 -

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

}

如何在更改select选项时运行我的JS脚本

2 个答案: