[英]Set dropdown value based on what is selected in another dropdown using Javascript, and vice versa
[英]Set dropdown value based on what is selected in another dropdown using Javascript
我有一些下拉菜单,其值如下所示。
下拉菜单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>
我需要根据从第一个下拉菜单中选择的值来更改第二个下拉菜单值。 例如:
我唯一可用的选择是使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.