如何在另一个下拉列表中选择的相同值自动填充一个下拉列表中的值? [英] 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 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.

预订课程

服务等级

从预订舱位"下拉列表中选择舱位"后，当我进入服务舱位"下拉列表时，应自动将其填写为舱位.然后，在单击下拉列表时，如果需要更改，列表应该是可见的.

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.

预订课程

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

---

我每个人都有单独的component.html文件和相应的component.ts文件.

---

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

推荐答案

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

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>

这篇关于如何在另一个下拉列表中选择的相同值自动填充一个下拉列表中的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！