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

Question

• 我有两次跌落，两次跌落的数值相同。
• 在不同的组件中预订类和类服务下拉列表。

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

订舱班

服务类别

从预订舱下拉菜单中选择头等舱后，当我进入服务下拉舱时，它应自动填写为头等舱。在单击下拉列表时，如果需要更改，列表应该是可见的。

订舱班

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

​