如何在angular2中获取多选下拉选定值

Posted 2023-02-22

【中文标题】如何在angular2中获取多选下拉选定值

【英文标题】：How to get multi select dropdown selected value in angular2

【发布时间】：2020-10-07 09:03:42

【问题描述】：

您好，我使用过 Angular8 和 bootstrap 4。我使用过 bootstrap 多选下拉菜单，我需要获取选定的下拉菜单值。我怎样才能得到这些值。

DEMO

TS：

 setTimeout(() => 
      $('#multiselectFileName').multiselect(
        buttonWidth: '400px'
      );
      $('#multiselectUser').multiselect(
        buttonWidth: '400px'
      );
    ,100)

html：

<div class="form-group">
          <label for="">Select User</label>
          <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)">
              <option *ngFor="let field of user" [value]="field.id" >
                  field.userName</option>
          </select>
      </div>

【参考方案1】：

对我来说，这与question 类似，尝试使用 [(ngModel)] 在 select 标签中绑定组件（ts 文件）的变量以查看会发生什么，并使用 console.log()或调试模式查看绑定到 [(ngModel)] 的变量的值 例如：

<select [(ngModel)]="selectedUsers" name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)">
              <option *ngFor="let field of user" [value]="field.id" >
                  field.userName</option>
          </select>

【讨论】：

尝试在选择标签<ng-container *ngFor="let field of user"> <option [value]="field.email">field.userName</option> </ng-container> 中为您的 *ngFor 使用 ng-container 我通过上面的代码成功完成了您的演示，您可以从Doc Official