[英]Angular 2 - How to display selected option for multi select dropdown?
<select #selectedfiscalyear multiple>
<option *ngFor="let fiscalyear of fiscalyears" value = {{fiscalyear.value}}>
{{fiscalyear.value}}
</option>
</select>
<button class="btnView">Click</button>
where在哪里
fiscalyears = [
{
"year": "fiscalYear",
"value": "2018"
},
{
"year": "fiscalYear",
"value": "2017"
},
{
"year": "fiscalYear",
"value": "2016"
},
{
"year": "fiscalYear",
"value": "2015"
},]
So, how to get the multiple selected values(such 2018,2017,2016 an so on) on button click event?那么,如何在按钮单击事件中获取多个选定的值(例如 2018、2017、2016 等)?
In this case, you should use ngModel
.在这种情况下,您应该使用ngModel
。 You won't even need the button action then.那时您甚至不需要按钮操作。
@Component({
selector: 'my-app',
template: `
<select #selectedfiscalyear multiple [(ngModel)]="selectedVal">
<option *ngFor="let fiscalyear of fiscalyears">
{{fiscalyear.value}}
</option>
</select>
<h1>{{ selectedVal }}</h1>
`
})
In case , that you really want to call that function on button click, use following code:如果您真的想在单击按钮时调用该函数,请使用以下代码:
@Component({
selector: 'my-app',
template: `
<select #selectedfiscalyear multiple [(ngModel)]="selectedVal">
<option *ngFor="let fiscalyear of fiscalyears">
{{fiscalyear.value}}
</option>
</select>
<button class="btnView" (click)="selectedVal.length ? select() : null">Click</button>
<input id="result">
`,
})
export class App {
constructor() {}
select(){
document.getElementById('result').value = this.selectedVal;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.