如何在選擇第一個或第二個下拉菜單時禁用下拉菜單，反之亦然

Question

我有 2 個下拉菜單。

我正在使用產品代碼（第一個下拉列表）和產品名稱（第二個下拉列表）填充那些。我需要根據選擇禁用下拉列表。 假設我選擇了第一個下拉菜單，然后禁用了第二個下拉菜單。 反之亦然選擇第二個下拉菜單，然后需要禁用第一個下拉菜單。

<select id="Code" class="form-control" placeholder="Code"

   disabled="stockForm.get('productName')?.value"

    formControlName="productId" required>
    <option [value]="''">Select Code</option>
    <option [value]="product.productId"
        *ngFor="let product of productData">
        {{product.sku}}
    </option>
</select>

 <select id="name" class="form-control" placeholder="Name"
   disabled="stockForm.get('productId')?.value"
   formControlName="productName" required>
    <option [value]="''">Select Name</option>
    <option [value]="product.productName"
        *ngFor="let product of productData">
        {{product.productName}}
    </option>
</select>

Answer 1

下面給出的代碼是您需要的，如果用戶 select 再次選擇選項，所有下拉菜單都將啟用，以便他們可以重新選擇其他下拉選項。

兩種方式的數據綁定 ([(disabled)]="productNameSelected") 用於執行此操作。

參考這個

HTML：

<select id='selectProductCode' (change)="productCodeChanged($event)" [(disabled)]="productNameSelected" >
    <option value="0">Choose code </option>
    <option value="1">Code1</option>
    <option value="2">Code2</option>
 </select>
 <select id='selectProductName' (change)="produvtNameChanged($event)" [(disabled)]="productCodeSelected" >
    <option value="0">Choose name </option>
    <option value="1">Name1</option>
    <option value="2">Name 2</option>
</select>

類型腳本：

productCodeSelected: boolean = false;
productNameSelected: boolean = false;
productCodeChanged(args) {
var value = args.target.value;
if (value > 0) {
  this.productCodeSelected = true;
}
else {
  this.productCodeSelected = false;
 }
}

produvtNameChanged(args) {
 var value = args.target.value;
 if (value > 0) {
  this.productNameSelected = true;
}
else {
  this.productNameSelected = false;
 }
}