时间戳

首页 > 解决方案 > 选择选项并在其他下拉菜单中禁用相同的选项

angular - 选择选项并在其他下拉菜单中禁用相同的选项

问题描述

在我的 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 = '';
        }
      }
    }
  });
}
}

标签： angulartypescriptselect

解决方案

我会使用禁止值数组来禁用复选框及其选项。索引将表示已检查哪个组，以及已检查哪个选项的值。

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>

推荐阅读