根據在另一個下拉列表中選擇的內容使用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'; 
}; 

編輯：爲了更specfic什麼，我需要，我編輯上面的例子。

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>