我正在尝试创建具有多个组合框选择的表单。我希望第一个组合框的选择会影响以下框中的选择。我只能让一对工作。我复制了函数并更改了ID，以使其能反映在传递的参数中，但它仍然仅适用于一对。下面的代码是我从本教程开始的内容，我想添加其他框，例如，雪佛兰的颜色为白色，黑红色，闪避的颜色为蓝色，绿色和黑色。我如何使第一个盒子依赖于其他盒子？
我尝试复制函数和html行，并将id和名称更改为slct1，slct2，slct3。当添加populate函数时，我将s1，s3作为新参数传递。我还尝试将所有功能都包含在一个函数中，并添加了要传递的其他参数。
<!DOCTYPE html>
<html>
<head>
<script>
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.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);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<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 />
</body>
</html>
我的预期结果是，用户选择了一辆汽车（雪佛兰，道奇，福特等），然后在其他方框中填充了基于该选择，型号和颜色的选项。我只能使主框和第一个从属框起作用。
最佳答案
这是一个示例，说明如何在已建立的模式上添加另一个<select>。可能有更清洁的方法可以执行此操作，但是只要遵循本教程，此方法就可以使用。
function populate(s1) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById('model');
var s3 = document.getElementById('color');
s2.innerHTML = "";
s3.innerHTML = "";
if (s1.value == "Chevy") {
var modelArray = ["|", "camaro|Camaro", "corvette|Corvette", "impala|Impala"];
var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
} else if (s1.value == "Dodge") {
var modelArray = ["|", "avenger|Avenger", "challenger|Challenger", "charger|Charger"];
var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
} else if (s1.value == "Ford") {
var modelArray = ["|", "mustang|Mustang", "shelby|Shelby"];
var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
}
for (var option in modelArray) {
var pair = modelArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
for (var option in colorArray) {
var pair = colorArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s3.options.add(newOption);
}
}<h2>Choose Your Car</h2>
<hr /> Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id)">
<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="model" name="slct2"></select>
<hr /> Choose Car Color:
<select id="color" name="slot3"></select>
<hr />如果您有任何疑问，请告诉我！
关于javascript - 如何根据一个选择创建多个动态选择框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57186470/