【问题标题】:How to disable dropdown while selecting 1st or 2nd dropdown vice verse如何在选择第一个或第二个下拉菜单时禁用下拉菜单,反之亦然
【发布时间】:2019-10-03 16:46:17
【问题描述】:

我有 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>

【问题讨论】:

    标签: c# bootstrap-4 angular6 angular7 dropdown


    【解决方案1】:

    下面给出的代码是您所需要的,如果用户再次选择选择的选项,所有下拉菜单将被启用,以便他们可以重新选择其他下拉选项。

    两种方式的数据绑定 ([(disabled)]="productNameSelected") 用于执行此操作。

    Refer this

    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;
     }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-14
      • 1970-01-01
      • 2017-09-19
      • 1970-01-01
      • 1970-01-01
      • 2012-06-29
      • 1970-01-01
      相关资源
      最近更新 更多