Установить выпадающее значение на основе того, что выбрано в другом выпадающем меню, используя 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'; 
}; 

EDIT: Чтобы быть более 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>