根据使用Javascript在另一个下拉列表中选择的内容设置下拉值 [英] Set dropdown value based on what is selected in another dropdown using Javascript
问题描述
我有几个下拉列表,其值如下所示。
I have couple of drop downs whose values are readily available as below.
下拉列表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>
我需要根据从第一个下拉菜单中选择的值来更改第二个下拉菜单值。例如:
I need to change second dropdown value based on the selected value from first dropdown. For example:
- 如果从下拉菜单1中选择了 Bike或 Cycle,则应自动选择2个车轮
- 如果选择了Car或Wagon,则应自动选择4轮。
对我来说唯一可用的选项是使用JavaScript。我尝试如下进行操作,但无法正常工作。请帮忙指出我遗漏/做错的事情。
Only option available for me is to use JavaScript. I tried like below, but it isn't working. Please help pointing out what am I missing/doing incorrect.
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';
};
编辑:为了更加明确我的需要,我编辑了上面的示例。
To be more specfic about what I need, I edited the example above.
推荐答案
在您解释完之后,我会这样做:
After your explanation, I would go with this:
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
Actually your code works too - perhaps your browser does not like the function name 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在另一个下拉列表中选择的内容设置下拉值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!