Question

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

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

以上是我的代码，但未禁用下拉值

Answer 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

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

1 个答案: