如何根据选择其他下拉菜单禁用下拉选项？答案

【问题标题】：How to Disable Dropdown Option based on selection of other dropdown?如何根据选择其他下拉菜单禁用下拉选项？
【发布时间】：2020-08-19 09:07:11
【问题描述】：

我需要根据当前下拉列表中的选定值禁用其他下拉列表中的选定值下面我提到了我的情况。

我有动态下拉列表，所以每个下拉列表都属于同一个 headerList 数组。

没有。下拉列表。

例如：

我总共有 10 个下拉菜单。如果用户从第一个下拉菜单中选择电子邮件，则所有其他下拉菜单都应禁用此电子邮件选项，如果用户将所选值从电子邮件更改为电话号码，则应为所有下拉菜单启用电子邮件，并应为所有下拉菜单禁用电话号码。

app.component.ts


public headerList :string[]=['First Name','Last Name','Company Name','Email','Phone Number','Lead Source','Details','Address 1','Address 2','City','State','Country','Zip','Tags','Assign To'];
public disabledDropdownItems : string[]=[];

onDropdownChange(event,index){
        
        if(event.target.value != ""){
                this.disabledDropdownItems.push(event.target.value);
                this.selectedDropdownColumns.push(index+';'+event.target.value);
        }
        else{
            
            let deselectItem =  this.selectedDropdownColumns.filter(item => item.includes(index+";"));
            
            if(deselectItem != undefined && deselectItem.length > 0 ){
                this.disabledDropdownItems.splice(this.disabledDropdownItems.indexOf(deselectItem[0],1));
                this.selectedDropdownColumns = this.selectedDropdownColumns.filter( selectedItem => selectedItem != deselectItem[0]);   
            }
            
        }
    }

app.component.html

 <div class="row" *ngFor="let header of manageLeadDataDto.header;let i = index"><br>
    <div class="col-lg-2">
    <input class="h-w-15" id="{{i}}" type="checkbox" (click)="onSelectDeselectCheckBox($event,i);"
                                        title="Select {{header}}">
    </div>
        <div class="col-lg-5">{{header}}</div>
        <div class="col-lg-5">
            <select  class="selectpicker" (change)="onDropdownChange($event,i);">
                <option value="" [selected]="true">Please select value</option>
                <option *ngFor="let header of headerList" value="{{header}}" [disabled]="disabledDropdownItems.includes(header)">{{header}}</option>
            </select>
        </div>
    </div>

上面是我的代码，但它没有禁用下拉值

【问题讨论】：

您知道吗，您有两个循环定义了来自两个不同列表的标题。这看起来很奇怪。如果您有嵌套列表，则内部列表通常使用外部列表中的一些值。可能你的外部列表不应该是 let header 而是 let headerList？

标签： angular

【解决方案1】：

这很简单，我们所要做的就是将索引和选定的值保存在一个变量中，在这里

<div class="row" *ngFor="let header of [1,2,3,4,5];let i = index"><br>
    <div class="col-lg-2">
    <input class="h-w-15" id="{{i}}" type="checkbox" (click)="onSelectDeselectCheckBox($event,i);"
                                        title="Select {{header}}">
    </div>
        <div class="col-lg-5">{{header}}</div>
        <div class="col-lg-5">
            <select  class="selectpicker" (change)="onDropdownChange($event,i);">
                <option value="" [selected]="true">Please select value</option>
                <option *ngFor="let header of headerList; let j = index"
                value="{{header}}"
                [disabled] = 'header===disabledItem &&  (selectIndex && selectIndex != i+1)'
                >{{header}}</option>
            </select>
        </div>
    </div>

在你的 ts 中

 disabledItem ='';
  selectIndex = 0;
public headerList :string[]=['First Name','Last Name','Company Name','Email','Phone Number','Lead Source','Details','Address 1','Address 2','City','State','Country','Zip','Tags','Assign To'];


onDropdownChange(event , i){
this.selectIndex = i+1;
this.disabledItem = event.target.value;
console.log(event.target.value , i)


}

参考这个工作演示

https://stackblitz.com/edit/angular-giemqz?file=src/app/app.component.html

【讨论】：