在选择对象中使用多个 add(） 命令

Using multiple add() commands in a select object

本文关键字：add 命令 选择 对象      更新时间：2023-09-26

我正在尝试创建一个网站，该网站根据用户在前<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）。我是否以正确的方式解决这个问题，只需要一个简单的修复，还是应该重新设计我解决这个问题的方式？

另外，我怎样才能使它们的第二种形式自动填充而无需单击按钮？

谢谢你的时间，

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

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
相关文章：