How To Auto Fill Value In One Drop Down With The Same Value Selected In Another Dropdown?

I have two dropdowns with same values in both the drop downs. Booking Class and Class of service dropdowns in different components. When I select any value from Booking class

Solution 1:

This is an onchange event listener to demonstrate the idea. So to see it in action, you need to change the selection. I accomplish the goal via dictionaries and loops.

//plastic cups can have coffee or tea//glass cups can have Iced Coffee, Iced Tea, or Soda//and we don't need to include anything here for no cup selected
cups = {"plastic": ["Coffee", "Tea"], "glass": ["Iced Coffee", "Iced Tea", "Soda"]}

//get the selection box for cups
cup = document.getElementById("Cup");
//add an event listener
cup.addEventListener("change", function() {

  //get the selection box for drinks
  drink = document.getElementById("Drink")
  //set its innerHTML to be nothing
  drink.innerHTML = "";
  //if the value from the cups selection box is not nocup (no cup selected)if (cup.value != "nocup")
  {
    //loop over the different drinksfor(var i = 0; i < cups[cup.value].length; i++)
    {
      //and add them to the drink options drop down
      drink.innerHTML += "<option>" + cups[cup.value][i] + "</option>";
    }
  }
  //otherwise, if the cups selection box is "nocup" (no cup is actually selected)else
  {
    //set the drinks selection box back to "No cup selected"
    drink.innerHTML = "<option>No cup selected</option>"
  }

});

<selectid="Cup"><optionvalue="nocup">
    Select one
  </option><optionvalue="plastic">
    Plastic
  </option><optionvalue="glass">
    Glass
  </option></select><selectid="Drink"><option>
    No cup selected
  </option></select>