Question

第一个多选下拉列表：-

<p-multiSelect (onChange)="ondestinationSelect($event, dataKey)" [options]="destinations" [showToggleAll]="false" [filter]="false" optionLabel="destination_name" dataKey="id" defaultLabel="Select Destination(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Destination(s) Selected"></p-multiSelect>

基于从上方下拉菜单中选择/取消选择的值，应从下方下拉菜单中添加/删除值：-

<p-multiSelect (onChange)="onresidenceSelect($event, dataKey)" [options]="residences" [showToggleAll]="false" [filter]="false" [optionLabel]="residence_name" [dataKey]="id" defaultLabel="Select Residence(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Residence(s) Selected"></p-multiSelect>

例如。第一个下拉列表的值（这是服务的响应）：

0:{id: "1", destination_name: "Matheran"}
1:{id: "2", destination_name: "Mumbai destination"}
2:{id: "3", destination_name: "Lonavla"}
3:{id: "4", destination_name: "Nashik"}

从上面的值中选择第二个选项时，

秒的值下拉列表：

0:{id: "1", residence_name: "Mumbai Residence 1", destination_id: "2"}
1:{id: "2", residence_name: "Mumbai Residence 2", destination_id: "2"}
2:{id: "3", residence_name: "saegrg asrgsdg", destination_id: "2"}
3:{id: "4", residence_name: "Test residence 1", destination_id: "2"}
4:{id: "6", residence_name: "sdbdfb dfgsgfb ddfgdf", destination_id: "2"}
5:{id: "8", residence_name: "Residence Name test 1.11 update 1.0", destination_id: "2"}
6:{id: "13", residence_name: "Residence Name test 2", destination_id: "2"}
7:{id: "15", residence_name: "drbbg", destination_id: "2"}
8:{id: "16", residence_name: "dkjg dgjj", destination_id: "2"}
9:{id: "17", residence_name: "test res 1", destination_id: "2"}
10:{id: "18", residence_name: "test 2", destination_id: "2"}
11:{id: "19", residence_name: "test 2", destination_id: "2"}

现在，当取消选择第一个下拉菜单中的选项2时，第二个下拉菜单应为空。但就我而言，它不会变空。

这是我尝试的代码：

ondestinationSelect(event) {
    let destinationIdArray = <FormArray>this.addteammateform.get('destinationsresponsiblefor');    
    let destinationId = new FormControl();

    if(event.value.length > destinationIdArray.length) {
      this.usermanagementService.get_residences(event.itemValue.id).subscribe(response => {
        if(response) {
          this.residences = response;
        }     
      });

      destinationId.setValue(event.itemValue.id);
      destinationIdArray.push(destinationId);
    }
    else {
      let i = 0;
      if(this.residences != undefined) {
        while(i < this.residences.length) {
          if(this.residences[i].destination_id == event.itemValue.id) {
            this.residences.splice(this.residences[i], 1);
          }
          else {
            ++i;
          }
        }
      }

      let destinationIndex = destinationIdArray.controls.indexOf(event.itemValue.id); 
      destinationIdArray.removeAt(destinationIndex);
    }
  }

Answer 1

我找到了解决上述问题的方法。这是代码。但我也遇到了一个问题：说第一个下拉菜单是国家，第二个是州。当您在第一个下拉列表中选择国家/地区时，第二个下拉列表中会填入相应的州。检查第二个下拉菜单中的任何选项。现在，在第一个下拉菜单中取消选中国家/地区后，第二个下拉列表为空，但计数（由代码显示

selectedItemsLabel="{0} Residence(s) Selected"

没有更新。另一个问题是，当您再次在第一个下拉菜单中选择相同的国家/地区选项时，第二个下拉列表中会填充州/省，但这次它显示了已选中的选项，用于您先前选择的值。

第一个下拉列表。

<p-multiSelect [options]="destinations" [panelStyle]="{minWidth:'12em'}" [showToggleAll]="false" [filter]="false" (onChange)="ondestinationSelect($event)" defaultLabel="Select Destination(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Destination(s) Selected">
  <ng-template let-destination>
    <span>{{destination.label}}</span>
  </ng-template>
</p-multiSelect>

在第一个下拉菜单中单击任何复选框时，它将获得包含点击选项的数据，第二个下拉菜单中将填充该数据。

ondestinationSelect(event) {
    let destinationIdArray = <FormArray>this.addteammateform.get('destinationsresponsiblefor');    
    let destinationId = new FormControl();

    if(event.value.length > destinationIdArray.length) {
      this.usermanagementService.get_residences(event.itemValue).subscribe(response => {
        if(response.length > 0) {
          for(let residenceIndex of response) {
            let residencePush = {label : residenceIndex.residence_name, value:{id:residenceIndex.id, destination_id : residenceIndex.destination_id}};
            this.residences.push(residencePush);
          }
        }    
      });
      destinationId.setValue(event.itemValue.id);
      destinationIdArray.push(destinationId);
    }
    else {
      let residenceCount = this.residences.length;
      let deleteResidenceArray : any = [];

      for(let i=residenceCount - 1; i >=0 ; i--) {
        if(this.residences[i].value.destination_id == event.itemValue) {
          this.residences.splice(i, 1)
        }
      }

      let destinationIndex = destinationIdArray.controls.indexOf(event.itemValue.id); 
      destinationIdArray.removeAt(destinationIndex);
    }
  }

第二个下拉列表。

<p-multiSelect (onChange)="onresidenceSelect($event)" [options]="residences" [panelStyle]="{minWidth:'12em'}" [showToggleAll]="false" [filter]="false"  defaultLabel="Select Residence(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Residence(s) Selected">
  <ng-template let-residence>
    <span>{{residence.label}}</span>
  </ng-template>
</p-multiSelect>

根据从另一个primeNg多选下拉列表中选择/取消选择的值，从primeNg多选下拉列表中添加/删除项目/值

1 个答案: