我有几个下拉菜单,其值很容易获得,如下所示。
下拉列表 1:
<select id="a">
<option value="1">Bike</option>
<option value="2">Car</option>
<option value="3">Bus</option>
<option value="4">Cycle</option>
<option value="5">Wagon</option>
</select>
下拉菜单 2:
<select id="b">
<option value="1">2 wheel</option>
<option value="2">4 wheel</option>
<option value="3">6 wheel</option>
</select>
我需要根据第一个下拉菜单中的选定值更改第二个下拉菜单的值。例如:
- 如果从下拉列表 1 中选择自行车或自行车,则应自动选择车轮 2
- 如果选择 Car 或 Wagon,则应自动选择 4 轮。
我唯一可用的选项是使用 JavaScript。我试过如下,但它不工作。请帮助指出我遗漏了什么/做错了什么。
HTML:
<select id="a" onchange="change();">
<option value="1">Bike</option>
<option value="2">Car</option>
<option value="3">Bus</option>
<option value="4">Cycle</option>
<option value="5">Wagon</option>
</select>
<select id="b">
<option value="1">2 wheel</option>
<option value="2">4 wheel</option>
<option value="3">6 wheel</option>
</select>
JS:
function change() {
if (document.getElementById('a').value == '1')
document.getElementById("b").value = '1';
else if (document.getElementById('a').value == '2')
document.getElementById("b").value = '2';
else if (document.getElementById('a').value == '3')
document.getElementById("b").value = '3';
else if (document.getElementById('a').value == '4')
document.getElementById("b").value = '1';
else if (document.getElementById('a').value == '5')
document.getElementById("b").value = '2';
};
编辑:为了更具体地说明我需要什么,我编辑了上面的示例。
最佳答案
在你的解释之后,我会同意这个:
window.onload=function() {
document.getElementById("a").onchange=function() {
document.getElementById("b").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("a").onchange(); // trigger when loading
}
<select id="a">
<option value="1" data-sync="1">Bike</option>
<option value="2" data-sync="2" selected>Car</option>
<option value="3" data-sync="3">Bus</option>
<option value="4" data-sync="1">Cycle</option>
<option value="5" data-sync="2">Wagon</option>
</select>
<select id="b">
<option value="1">2 wheel</option>
<option value="2">4 wheel</option>
<option value="3">6 wheel</option>
</select>
实际上您的代码也可以工作 - 也许您的浏览器不喜欢函数名称 change
function change() {
if (document.getElementById('a').value == '1')
document.getElementById("b").value = '1';
else if (document.getElementById('a').value == '2')
document.getElementById("b").value = '2';
else if (document.getElementById('a').value == '3')
document.getElementById("b").value = '3';
else if (document.getElementById('a').value == '4')
document.getElementById("b").value = '1';
else if (document.getElementById('a').value == '5')
document.getElementById("b").value = '2';
};
<select id="a" onchange="change();">
<option value="1">Bike</option>
<option value="2">Car</option>
<option value="3">Bus</option>
<option value="4">Cycle</option>
<option value="5">Wagon</option>
</select>
<select id="b">
<option value="1">2 wheel</option>
<option value="2">4 wheel</option>
<option value="3">6 wheel</option>
</select>
关于javascript - 使用 Javascript 根据在另一个下拉列表中选择的内容设置下拉值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42203800/