[英]How can I fire select dropdown onchange event programatically?
I am assigning the below datasource 'tabNameList' on page load. 我在页面加载时分配以下数据源'tabNameList'。 After it loads the select list I then assign it the default value of lets say 12. This should trigger the below code to fire however it never fires.
加载选择列表后,我将其分配为默认值,例如12。这将触发以下代码触发,但永远不会触发。 How can I get the code to fire the second the tablist is loaded and the selectedTabId is set to 12?
我如何获取代码以在第二次加载选项卡列表并将selectedTabId设置为12时触发?
The setup code 设置代码
LoadTabNames(){
this._userProfileService.loadTabNames(this.screenId).subscribe(data => {
this.DisableTab= false;
this.tabNameList = data[0];
this.selectedTabId = data[0]["ScreenId"] <----- TabNameChanged event should fire right here since the ngModel has changed
this.cdr.detectChanges();
})
}
TabNameChanged(event){
this.selectedColumns = [];
this.availableColumns = [];
// When the tab select changes load the new headers into the First ListBox
const detailList = filterBy(this.UserProfileTabData, {
logic: 'and',
filters: [
{ field: 'ScreenId', operator: 'eq', value: this.screenId, ignoreCase: true },
{ field: 'TabId', operator: 'eq', value: event, ignoreCase: true }
]
});
detailList.forEach(element => {
this.selectedColumns.push(element["ColumnName"]);
});
}
My html 我的HTML
<div class="col">
<label for="dropdown2">Tab Name</label>
<select #tab class="custom-select custom-select-lg mb-3" id="dropdown2" [disabled]='DisableTab' (ngModelChange)='TabNameChanged($event)' [(ngModel)]="selectedTabId">
<option *ngFor="let tab of tabNameList let i=index" [(ngValue)]="tab.TabId" >{{tab.TabName}}</option>
</select>
</div>
You need to change from (ngModelChange)='TabNameChanged($event)'
to (change)="TabNameChanged($event)"
in your HTML for the dropdown. 您需要将
(ngModelChange)='TabNameChanged($event)'
(change)="TabNameChanged($event)"
为(change)="TabNameChanged($event)"
。
For example: 例如:
<div class="col">
<label for="dropdown2">Tab Name</label>
<select #tab class="custom-select custom-select-lg mb-3" id="dropdown2" [disabled]='DisableTab' (change)='TabNameChanged($event)' [(ngModel)]="selectedTabId">
<option *ngFor="let tab of tabNameList let i=index" [(ngValue)]="tab.TabId" >{{tab.TabName}}</option>
</select>
</div>
You can fire an element's event at any time using the following code: 您可以使用以下代码随时触发元素的事件:
let element = document.getElementById(id);
element.dispatchEvent(new Event("change"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.