我正在尝试创建一个具有多个组合框选择的表单。我希望第一个组合框的选择影响以下框中的选择。我只能让一对工作。我复制了该函数并更改了 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>我的预期结果是用户选择一辆汽车（雪佛兰、道奇、福特等），然后根据该选择、型号和颜色等附加框填充选项。我只能让主框和第一个从属框工作。
3 回答
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
下面是一个示例，说明如何将另一个添加<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 />
慕田峪4524236
TA贡献1875条经验 获得超5个赞
我对您的代码做了一些更改：
仅获取一次参考
选择总是相同的，只是选项发生了变化，所以我将选择移到了另一个范围。
var form = document.querySelector('form');
var brandSelect = form.querySelector('#brand');
var modelSelect = form.querySelector('#model');
var colorSelect = form.querySelector('#color');
克隆元素
克隆对象始终向 DOM 请求创建新对象。
var optionElement = document.createElement('option');
...
var optionModel = optionElement.cloneNode(true);
保护范围
将您的代码包装在一个自动调用的函数中，以避免将您的变量和函数放在全局范围内。这避免了库之间的一些可能的冲突。
(function(){...})();
创建数据引用
数据引用更具可读性，如果出现问题也易于调试。
var brandOptions = {
Chevy: {
model: ['camaro', 'corvette', 'impala'],
color: ['white', 'black', 'red'],
},
Dodge: {
model: ['avenger', 'challenger', 'charger'],
color: ['blue', 'green', 'black'],
},
Ford: {
model: ['camaro', 'corvette', 'impala'],
color: ['red', 'green', 'blue'],
},
}
完整示例
(function(){
var form = document.querySelector('form');
var brandSelect = form.querySelector('#brand');
var modelSelect = form.querySelector('#model');
var colorSelect = form.querySelector('#color');
var optionElement = document.createElement('option');
var brandOptions = {
Chevy: {
model: ['camaro', 'corvette', 'impala'],
color: ['white', 'black', 'red'],
},
Dodge: {
model: ['avenger', 'challenger', 'charger'],
color: ['blue', 'green', 'black'],
},
Ford: {
model: ['camaro', 'corvette', 'impala'],
color: ['red', 'green', 'blue'],
},
};
function addOptionIntheSelect(options) {
modelSelect.innerHTML = '';
options.model.forEach(function(model) {
var optionModel = optionElement.cloneNode(true);
optionModel.value = model;
optionModel.innerHTML = model;
modelSelect.appendChild(optionModel);
});
colorSelect.innerHTML = '';
options.color.forEach(function(color) {
var optionColor = optionElement.cloneNode(true);
optionColor.value = color;
optionColor.innerHTML = color;
colorSelect.appendChild(optionColor);
});
}
function onSelectChange(event) {
addOptionIntheSelect(brandOptions[event.target.value]);
}
brandSelect.onchange = onSelectChange;
})();
.container {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
label, select {
display: block;
width: 100%;
box-sizing: borde-box;
}
select {
text-transform: Capitalize;
}
label {
margin-bottom: 8px;
}
form > div {
padding: 8px 0;
}
<div class="container">
<form>
<div>
<label for="">Choose Car Make:</label>
<select id="brand" name="brand">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
</div>
<div>
<label for="">Choose Car Model:</label>
<select id="model" name="slct2"></select>
</div>
<div>
<label for="">Choose Car Color:</label>
<select id="color" name="slot3"></select>
</div>
</form>
</div>
喵喵时光机
TA贡献1846条经验 获得超7个赞
这里我只为第一个选项添加了红色、白色和黑色的代码。其他选项没有颜色问候语
enter code here
<!DOCTYPE html>
<html>
<head>
<script>
function populate(s1,s2,slcolor){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
slcolor.innerHTML= "";
if(s1.value == "Chevy"){
var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
var optionColor = ["|","red|Red","white|White","black|Black"];
} else if(s1.value == "Dodge"){
var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
var optionColor = ["|"];
} else if(s1.value == "Ford"){
var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
var optionColor = ["|"];
}
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);
}
for(var option in optionArray) {
var pair = optionColor[option].split("|");
var newOptionC = document.createElement("option");
newOptionC.value = pair[0];
newOptionC.innerHTML = pair[1];
slcolor.options.add(newOptionC);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2',slcolor)">
<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 Color:
<select id="slcolor" name="slcolor"></select>
<hr />
</body>
</html>
添加回答
举报
0/150
提交
取消