Question

尝试制作一个选择更改选项控制多个选择选项。选择第一个选项，其中以下选项与第一个选项的选项相关联。我进入了第三行，但是第二行不起作用，第三行接收了两者的选择。

<script>
function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    var s3 = document.getElementByis(s3);
    s2.innerHTML = "";
    s3.innerHTML = "";
    if(s1.value == "Chevy"){
        var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } else if(s1.value == "Dodge"){
        var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
        var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
        s3.options.add(newOption);
    }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct3')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
Choose Car Model:
<select id="slct3" name="slct3"></select>
</body>

Answer 1

首先，看看您的代码中存在一些拼写错误。

function populate(s1,s2){ //missing parameter 's3'
...
  var s3 = document.getElementByis(s3) //Should be getElementById
...

为了附加您在for循环中创建的新选项节点，您应该使用appendChild函数。但由于您无法在DOM中将相同的节点追加两次，因此可以使用cloneNode函数。

然后你替换这些行：

...
s2.options.add(newOption);
s3.options.add(newOption);
...

使用：

...
var dup = newOption.cloneNode(true);  // check the docs for the 'true' parameter here
s2.appendChild(newOption);
s3.appendChild(dup);
...

工作小提琴：

＆＃13;

<script>
function populate(s1,s2,s3){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    var s3 = document.getElementById(s3);
    s2.innerHTML = "";
    s3.innerHTML = "";
    if(s1.value == "Chevy"){
        var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } else if(s1.value == "Dodge"){
        var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
        var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        var dup = newOption.cloneNode(true);
        s2.appendChild(newOption);
        s3.appendChild(dup);
        // s2.options.add(newOption);
        // s3.options.add(newOption);
    }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct3')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
Choose Car Model:
<select id="slct3" name="slct3"></select>
</body>

＆＃13;

Javascript表单选择更改选项动态列表/一个到多个列表

1 个答案: