如何使用在另一个下拉列表中选择的相同值自动填充一个下拉列表中的值？

Question

• 我有两个下拉菜单，两个下拉菜单中的值相同。

• 不同组件中的预订类别和服务类别下拉菜单。

---

当我从预订类别下拉列表中选择任何值时，它应该填写在服务类别下拉列表中，并且还允许通过单击下拉列表来更改值。 如果在 Booking Class 下拉列表中未选择任何值，则服务类别下拉列表可以保持原样。

---

Booking class

Class of service

从 Booking class 下拉菜单中选择 First class 后，当我进入 Class of service 下拉菜单时，它应该自动填写为 First 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>

---

服务等级

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

---

我有单独的 component.html 文件和各自的 component.ts 文件。

---

Answer 1

这是一个 onchange 事件监听器来演示这个想法。因此，要查看它的实际效果，您需要更改选择。我通过字典和循环来实现目标。

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