在选择对象中使用多个 add() 命令答案

【问题标题】：Using multiple add() commands in a select object在选择对象中使用多个 add() 命令
【发布时间】：2015-03-10 15:04:50
【问题描述】：

我正在尝试创建一个网站，该网站根据之前<form> 中的用户输入更改其<form> 中的<option>。我的模型如下。

<!DOCTYPE html>
<html>
<body>

<form>
  <select id="select">
    <option>Car</option>
    <option>Phone</option>
  </select>
</form>

<button onclick="myFunction()">Get new list</button>

<form>
  <select id="results">
  </select>
</form>

<script>
function myFunction() {
    var x = document.getElementById("select").value;
    var y = document.getElementById("results");
    var option = document.createElement("option");
    if (x == "Car")
    {
        for(i = 0; i < document.getElementById("results").length; i++)
        {
            y.remove(y[i]);
        }

        option.text = "Honda";
        y.add(option);
        option.text = "Nissan";
        y.add(option);
        option.text = "BMW";
        y.add(option);
    }
    if (x == "Phone")
    {
        for(i = 0; i < document.getElementById("results").length; i++)
        {
            y.remove(y[i]);
        }

        option.text = "Blackberry";
        y.add(option);
        option.text = "Nokia";
        y.add(option);
        option.text = "Android";
        y.add(option);
    }
}
</script>

</body>
</html>

我希望此代码执行的操作是，如果用户选择“汽车”选项，则允许他们选择本田、尼桑或宝马，如果选择“电话”选项，则允许他们选择黑莓、诺基亚或 Android。但是add() 命令只接受最后一行输入（BMW 或 Android）。我是否以正确的方式解决这个问题，只需要一个简单的修复，还是我应该重新设计解决这个问题的方法？

另外，我怎样才能让第二个表单自动填充而无需单击按钮？

感谢您的宝贵时间，

【问题讨论】：

标签： javascript add

【解决方案1】：

您每次都添加相同的选项对象 - 您需要使用创建一个新的选项对象

option = document.createElement("option");

在每个option.text = "xxxx"; 行之前。

例如

var option1 = document.createElement("option");
option1.text = "Honda";
y.add(option1);

var option2 = document.createElement("option");
option2.text = "Nissan";
y.add(option2);

// etc

【讨论】：