在选择框中动态生成选项答案

【问题标题】：Dynamic generation of options in select box在选择框中动态生成选项
【发布时间】：2019-05-01 04:38:02
【问题描述】：

我有两个选择框，其值为，

选择框 1 TS

  projects = [
    {
      key: 1, value: "Project one",
    },
    {
      key: 2, value: "Project two",
    },
    {
      key: 3, value: "Project three",
    }
  ]

上面的 HTML，

<select name="project" (change)="changeProject($event)">
<option *ngFor="let opt of projects" [value]="opt.key">{{opt.value}}</option>
</select>

选择框 2 TS

  propertyCode = [
    {
      key: 101, value: "PC101",
    },
    {
      key: 102, value: "PC102",
    },
    {
      key: 103, value: "PC103",
    }
  ]

上面的 HTML，

<select name="project" (change)="changePropertyCode($event)">
<option *ngFor="let opt of propertyCode" [value]="opt.key">{{opt.value}}</option>
</select>

在这里，从下拉菜单一和下拉菜单二中选择任何选项后，我需要为下拉菜单三生成一组新的选项..

例如，

场景 1

如果我分别选择了Project Two 和PC103 两个选择框，那么我需要将下拉菜单设置为，

  product = [
    {
      key: 123, value: "PC103PROD123",
    },
    {
      key: 456, value: "PC103PROD456",
    },
    {
      key: 789, value: "PC103PROD789",
    }
  ]

场景 2

如果我分别选择了Project Three 和PC102 两个选择框，那么我需要将下拉菜单设置为，

  product = [
    {
      key: 123, value: "PC102PROD123",
    },
    {
      key: 456, value: "PC102PROD456",
    },
    {
      key: 789, value: "PC102PROD789",
    }
  ]

在这里您可以看到该值的初始字符分别为PC103 和PC102，这将在分别从前两个选择框中选择两个选项时发生变化。

如果我从这些选择框中选择提到的选项，我需要像上面那样生成选项。

工作堆栈闪电战 https://stackblitz.com/edit/angular-wjhsun

请帮助我根据第一个和第二个选择框选项的选择动态生成第三个选择框选项在没有 jquery 的情况下使用纯 angular、typescript 或 javascript..

【问题讨论】：

您没有第三个下拉菜单的数据。你能把它添加到你的 stackblitz 中吗？
@Jai，这就是我的要求，我需要根据前两个的选择动态生成它。<option *ngFor="let opt of product" [value]="opt.key">{{opt.value}}</option> 在 stackblitz 中给出，product 数组只会改变在选择前两个下拉值时。
这意味着您要根据其他下拉菜单创建选项。问题是有多少？因为有一次，两个下拉菜单都只有一个选择。根据您需要的第三个下拉菜单的多个选项。
KIndly 在我的问题中的For eg, 行之后阅读..，如果我选择Project Two and PC103，那么我的第三个（产品）下拉列表将与上面预期的一样，如果我改变它然后产品下拉菜单需要相应更改..（在我的问题中总结了两个场景，产品在选择时需要如何更改）..

标签： javascript html angular typescript angular6

【解决方案1】：

只需创建一个私有方法，该方法将基于selectedProject 和seletedProperty 属性设置products 数组：

import { Component } from '@angular/core';

@Component({...})
export class AppComponent {

  selectedProject;
  selectedProperty;
  product;

  projects = [
    {
      key: 1, value: "Project one",
    },
    {
      key: 2, value: "Project two",
    },
    {
      key: 3, value: "Project three",
    }
  ]

  propertyCode = [
    {
      key: 101, value: "PC101",
    },
    {
      key: 102, value: "PC102",
    },
    {
      key: 103, value: "PC103",
    }
  ]

  changeProject() {
    this.setProducts();
  }

  changePropertyCode() {
    this.setProducts();
  }

  private setProducts() {
    if ((this.selectedProject === "Project two" && this.selectedProperty === 'PC103') || (this.selectedProject === "Project three" && this.selectedProperty === 'PC102')) {

      let potentialProduct = [
        {
          key: 123, value: `${this.selectedProperty}PROD123`,
        },
        {
          key: 456, value: `${this.selectedProperty}PROD456`,
        },
        {
          key: 789, value: `${this.selectedProperty}PROD789`,
        }
      ]

      this.product = potentialProduct;
    } else {
      this.product = [];
    }
  }

}

然后在您的模板中，将[(ngModel)] 用于projects 和properties 下拉菜单：

<select 
  name="project" 
  [(ngModel)]="selectedProject" 
  (change)="changeProject($event)">
  <option 
    *ngFor="let opt of projects" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  [(ngModel)]="selectedProperty" 
  (change)="changePropertyCode($event)">
  <option 
    *ngFor="let opt of propertyCode" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  (change)="changeProductCode($event)">
  <option 
    *ngFor="let opt of product" 
    [value]="opt.key">
    {{opt.value}}
  </option>
</select>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

@undefined，刚刚添加。希望对您有所帮助。

【解决方案2】：

Here 是 stackblitz 的链接。这可能对您有帮助。

【讨论】：

【解决方案3】：

从您上面的要求看来，您只需要选择选项的显示字符串是动态的，并且第三个下拉列表中标签的实际值是固定的。

如果上述情况属实，那么你可以这样做

您的键值对象数组将如下所示

product = [
  {
    key: 123, value: "PROD123",
  },
  {
    key: 456, value: "PROD456",
  },
  {
    key: 789, value: "PROD789",
  }
]

你只需要附加选定的字符串[这将与一个变量绑定]

<select name="project" [(ngModel)]='productString' 
    (ngModelChange)='onOptionsSelected($event)'>
        <option *ngFor="let opt of product" [value]="opt.key">{{opt.value}}</option>
 </select>

您的onOptionsSelected(event) 方法的 TS 代码将是

onOptionsSelected(event){
    console.log(event)
    for(let item of this.product){
      if(item.key==event){
        this.productStringValue=item.value
        break;
      }
    }
  }

请参阅下面的 stackblitz 现场示例：https://stackblitz.com/edit/angular-vrk9b3

【讨论】：