Question

我有多个包含相同数组值的下拉菜单，我想禁用在一个下拉菜单中为其他下拉菜单选择的选项，那么我该如何实现呢？

 <div>
    <div>
      <label >Name</label>
    </div>
    <div >
      <select >
        <option value="">Select</option>
        <option *ngFor="let type of Demo">{{type}}</option>
      </select>
    </div>
  </div>

 <div>
    <div>
      <label >Number</label>
    </div>
    <div >
      <select >
        <option value="">Select</option>
        <option *ngFor="let type of Demo">{{type}}</option>
      </select>
    </div>
  </div>

.ts File
Demo = ['One', 'Two','Three']

Answer 1

尝试一下

<div>
  <div>
    <label >Name</label>
  </div>
  <div >
    <select [(ngModel)]="selectedValues[0]">
      <option value="">Select</option>
      <option *ngFor="let type of Demo" [ngValue]="type" [disabled]="isDisabled(type)">{{type}}</option>
    </select>
  </div>
</div>

<div>
  <div>
    <label >Number</label>
  </div>
  <div >
    <select [(ngModel)]="selectedValues[1]">
      <option value="">Select</option>
      <option *ngFor="let type of Demo" [ngValue]="type" [disabled]="isDisabled(type)">{{type}}</option>
    </select>
  </div>
</div>

Demo = ['One', 'Two', 'Three']
  selectedValues = [];
  isDisabled(value) {
    return this.selectedValues.includes(value);
  }

如果下拉列表中有20个，请将html代码放在* ngFor上，并将标签值绑定到标签上。

禁用所有其他下拉菜单中一个下拉菜单的选定选项

1 个答案: