Set dropdown value based on what is selected in another dropdown using Javascript

Question

I have couple of drop downs whose values are readily available as below.

Dropdown 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>

Dropdown 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:

• If Bike or Cycle is selected from dropdown 1, 2 wheel should be auto selected
• If Car or Wagon is selected, 4 wheel should be auto selected.

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';
};

EDIT: To be more specfic about what I need, I edited the example above.

Answer 1

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> 

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>