Javascript 如何以编程方式触发更改事件上的选择下拉列表?
我正在页面加载时分配以下数据源“tabNameList”。在它加载选择列表之后,我给它指定默认值,比如说12。这将触发下面的代码激发,但它不会激发。如何在加载tablist并将selectedTabId设置为12时获取启动代码 设置代码Javascript 如何以编程方式触发更改事件上的选择下拉列表?,javascript,typescript,Javascript,Typescript,我正在页面加载时分配以下数据源“tabNameList”。在它加载选择列表之后,我给它指定默认值,比如说12。这将触发下面的代码激发,但它不会激发。如何在加载tablist并将selectedTabId设置为12时获取启动代码 设置代码 LoadTabNames(){ this._userProfileService.loadTabNames(this.screenId).subscribe(data => { this.DisableTab= false;
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"]);
});
}
LoadTabNames(){
此.u userProfileService.loadTabNames(this.screenId).subscribe(数据=>{
this.DisableTab=false;
this.tabNameList=数据[0];
this.selectedTabId=data[0][“ScreenId”]{
this.selectedColumns.push(元素[“ColumnName]”);
});
}
我的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>
选项卡名称
{{tab.TabName}
您需要在HTML下拉列表中将(ngModelChange)='TabNameChanged($event)
更改为(change)=“TabNameChanged($event)
例如:
<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>
选项卡名称
{{tab.TabName}
您可以随时使用以下代码触发元素的事件:
let element = document.getElementById(id);
element.dispatchEvent(new Event("change"));
这:如果这样做,则event.target.value为“”。我需要将该值设置为我刚才通过代码This.selectedTabId=data[0][“ScreenId”]设置的值。这不会为我触发。此外,如果我从下拉列表中手动选择,event.target.value看起来像是“12:12”。当它应该是12时