In Angular 4, instead of using a corner drop-down list with multiple choices, I used the usual one. Below is the code.
HTML file:
<select [ngModel]="DataValue" (change)="selectChangeHandler($event)" id="multiple-select" name="multiple-select" class ="form-control" multiple> <option *ngFor="let ref of Data" [value]="ref['title']"> {{ref['title']}} </option> </select>
Ts file:
selectChangeHandler (event: any) { let oldvalue; let mergedValue = ""; for ( let index = 0 ; index < event.currentTarget.selectedOptions.length; index++) { oldvalue = event.currentTarget.selectedOptions[index].value.replace(/["']/g, ""); oldvalue = oldvalue.split(': ')[1]; if (index =='enter code here'= 0) { mergedValue += oldvalue; } else { mergedValue += ", " + oldvalue; } } console.log(mergedValue); }
Comments:
- Using
event.currentTarget.selectedOptions[index].value you can get multiple selected multiple selection values. In my case, mergedValue gives me the correct multiple selected values. - I used split and replace to format the resulting string the way I wanted it to be split.
I hope this can help someone.
rhea machado
source share