如何使用在另一个下拉列表中选择的相同值自动填充一个下拉列表中的值? [英] How to auto fill value in one drop down with the same value selected in another dropdown?
问题描述
我有两个下拉菜单，它们的值都相同.
不同组件中的预订等级和服务等级下拉菜单.
当我从 Booking class 下拉列表中选择任何值时，它应该填写在 Class of service 下拉列表中，并且还允许通过单击下拉列表来更改该值.如果在 Booking Class 下拉列表中未选择任何值，则服务等级下拉列表可以保持原样.
从 Booking class 下拉菜单中选择 First class 后，当我转到 Class of service 下拉菜单时，它应该自动填充为 First class.在点击下拉菜单时，如果需要更改，列表应该是可见的.
预订舱位
<label class="col-sm-2">{{'Booking Class' |翻译}}</label><div class="col-sm-3"><ng-select placeholder="Any";[virtualScroll]=真"formControlName="serviceClass"><ng-option *ngFor="let item of bookingClassData[value]="item.classOfServiceName">{{item.classOfServiceName}}</ng-select>服务等级
<label>{{'服务等级' |翻译}}</label><ng-select placeholder="选择服务等级";[virtualScroll]=真"formControlName=classOfService"><ng-option *ngFor="let data of classOfServiceData";[值]=data.classOfServiceName">{{data.classOfServiceName}}</ng-select>我有单独的 component.html 文件和各自的 component.ts 文件.
这是一个用于演示想法的 onchange 事件侦听器.因此，要查看它的实际效果，您需要更改选择.我通过字典和循环来完成目标.
//塑料杯可以装咖啡或茶//玻璃杯可以装冰咖啡、冰茶或苏打水//并且我们不需要在这里包含任何没有选择杯子的东西杯子 = {塑料":[咖啡"，茶"]，玻璃":[冰咖啡"，冰茶"，苏打水"]}//获取杯子的选择框cup = document.getElementById("Cup");//添加事件监听器cup.addEventListener(更改"，函数(){//获取饮料的选择框喝 = document.getElementById("喝")//设置其innerHTML为空Drink.innerHTML = "";//如果杯子选择框中的值不是nocup(没有选择杯子)如果(cup.value！=nocup"){//循环不同的饮料for(var i = 0; i 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.
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.
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屋！
