使用Javascript根据另一个下拉框所选内容设置下拉框的值

Question

我有几个下拉框，其值如下所示。

下拉框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个轮子
• 如果选择汽车或者货车，则应该自动选择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';
};

编辑：为了更明确我需要什么，我编辑了上面的示例。

- Ram

---

@mplungjan：请查看我在问题中的编辑。 - Ram

Answer 1

在您的解释之后，我会选择这个：

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>

- mplungjan

---

我会尝试您的解决方案。由于某些原因，我的代码无法正常工作。 - Ram

我成功让两个解决方案都起作用了。之前我将“Id”作为参数传递给函数，但没有起作用。在直接引用id的document.getElementById中，它起作用了。谢谢！ - Ram