时间戳

首页 > 解决方案 > 如何根据选择其他下拉菜单禁用下拉选项？

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

问题描述

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

我有动态下拉列表，所以每个下拉列表都属于同一个 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>

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

标签： angular

解决方案

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

<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

推荐阅读