Search code examples
angularbootstrap-multiselect

How to get multi select dropdown selected value in angular2


Hi i have used Angular8 and bootstrap 4. I have used bootstrap multi-select dropdown, i need to get the selected dropdown values. How can i get those values.

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>

Solution

  • For me, it's simular to this question, try to use [(ngModel)] to bind a variable of your component (ts file) in your select tag to see what happens, and also use console.log() or debug mode to view the value of the variable binding to [(ngModel)] For example:

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