How to auto fill value in one drop down with the same value selected in another dropdown?

Question

• 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 dropdown, it should be filled in Class of service dropdown and also allow to change the value by clicking the dropdown. If no value is selected in the Booking Class dropdown, the class of service dropdown can be as it is.

---

Booking class

Class of service

After selecting First class from Booking class dropdown,when I go to Class of service dropdown, it should be automatically filled as First class. And on clicking the dropdown, the list should be visible if needed to change.

---

Booking Class

<div>
      <label class="col-sm-2">{{'Booking Class' | translate}}</label>
                      <div class="col-sm-3">
                            <ng-select placeholder="Any" [virtualScroll]="true" formControlName="serviceClass">
                              <ng-option *ngFor="let item of bookingClassData[value]="item.classOfServiceName">  {{item.classOfServiceName}}</ng-option>
                            </ng-select>
                      </div>
 </div>

---

Class of Service

<div class="form-group col-md-3">
            <label>{{'Class Of Service' | translate}}</label>
               <ng-select placeholder="Select Class Of Service" [virtualScroll]="true"    formControlName="classOfService">
                  <ng-option *ngFor="let data of classOfServiceData" [value]="data.classOfServiceName">
                    {{data.classOfServiceName}}</ng-option>
                </ng-select>
    </div>

---

I have separate component.html files and respective component.ts files for each.

---

Answer 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 drinks
    for(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>"
  }

});

<select id="Cup">
  <option value="nocup">
    Select one
  </option>
  <option value="plastic">
    Plastic
  </option>
  <option value="glass">
    Glass
  </option>
</select>

<select id="Drink">
  <option>
    No cup selected
  </option>
</select>