[英]Select Option and disable same option in other dropdowns
在我的Anuglar應用程序中,我生成一些選擇框,其數量可能有所不同。 每個選擇框都有相同的選項。 我要做的是,如果我在一個選擇框中選擇一個選項,則應在所有其他選擇框中禁用同一選項,這樣其他選擇框不能同時具有相同的值。 如果我在該選擇框中選擇了另一個選項,則應在所有其他選擇框中啟用上一個選項,並禁用新的選擇框。
我可以說到它可以與兩個選擇框一起使用。 如果還有更多,它將無法正常運行。
這是一個由選擇框的onChange調用的函數:
public disableAlreadyUsedOption(group: any, dropDownId: any): void {
if (group.usecase === 'usage_ds' || group.usecase === 'usage_dg') {
this.listOfdropDowns[group.usecase].forEach((element, indexOfForeach) => {
const tmpDropDownId = group.usecase + '_' + indexOfForeach;
if (dropDownId !== tmpDropDownId) {
const op = document.getElementById(tmpDropDownId).getElementsByTagName('option');
for (let i = 1; i < op.length; i++) {
if (op[i].value === group.optionValue) {
op[i].disabled = true;
op[i].className = 'disabledOtions';
} else {
op[i].disabled = false;
op[i].className = '';
}
}
}
});
}
}
我將使用禁止值數組禁用復選框及其選項。 索引將代表已檢查的組,以及已檢查的選項的值。
forbiddenValues = [];
optionsGroups = [
['option 1', 'option 2', 'option 3'],
['option 1', 'option 2', 'option 3'],
['option 1', 'option 2', 'option 3'],
];
onGroupOptionChecked(optionGroup, optionValue) {
const indexOfGroup = this.optionsGroups.indexOf(optionGroup);
const indexOfOption = this.forbiddenValues[indexOfGroup].indexOf(optionValue);
this.forbiddenValues[indexOfGroup] = indexOfOption;
}
現在,您可以遍歷您的選項,並非常簡單地停用它們:
<option-group *ngFor="let group of optionsGroups; let groupIndex = index">
<option-value *ngFor="let option of group; let optionIndex = index"
[value]="option"
[disabled]="forbiddenValues.indexOf(optionIndex) !== -1">{{ option }}</option-value>
</option-group>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.