根据使用 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 中选择了自行车或自行车，则应自动选择 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屋！