I have a HTML page where I am using 2 select - option drop-down I want to fill the second drop-down on the basis of what is selected in the first drop-down.
Actually there are 2 drop-downs I have some values in first drop-down on-loading the page for first time one is selected depending on API result, now I want to bind the list to second drop-down based on what is selected in first drop-down.
Can anyone help me in doing that in Angular 2 HTML select-option
<td>
<div>
<select #selectedHeading (change)="headingChanged($event.target.selectedIndex)" [disabled]='butDisabled'>
<option *ngFor="let heading of headings" [value]="heading.val" [ngValue]="accountitem" [selected]="accountitem.heading === heading.val" >
{{heading.val}}
</option>
</select>
</div>
</td>
<td>{{accountitem.rules}}</td>
<td>
<select #selectedSubHeading [disabled]='butDisabled'>
<option *ngFor="let subHeading of subHeadings" [value]="subHeading.val">{{subHeading.val}}</option>
</select>
</td>
change this variable to count++ in ngOnInit() and we will check in inside this method.
count:number=0;
headingChanged(receivePraam){
if(count){
this.butDisabled=true;
}
else{
this.butDisabled=false;
}
//and here set dropdown2 value.
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.