Question

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

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

我希望此代码可以让用户选择本田，日产或宝马，如果他们选择了Car选项并选择Blackberry，Nokia或Android，如果他们选择了Phone选项。但是add()命令只接受最后一行输入（BMW或Android）。我是否只需要一个简单的修复就能以正确的方式解决这个问题，或者我应该如何处理这个问题呢？

另外，我怎样才能这样做，以便第二种形式自动填充而无需点击按钮？

感谢您的时间，

Answer 1

您每次都要添加相同的选项对象 - 您需要使用

创建一个新选项

option = document.createElement("option");

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

E.g。

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

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

// etc

在select对象中使用多个add（）命令

1 个答案: