加載表單時如何調用DropDownList onchange事件

Question

我正在顯示一個表單，該表單允許用戶在Beer表中編輯或創建條目。 為解決此問題，該表單在Brewery表中具有一個針對啤酒廠的DropDownList 。 更改下拉列表選擇后，一些JavaScript將在表格的其余部分旁邊顯示新選擇的啤酒廠的啤酒列表。 下拉列表是這樣創建的：-

@Html.DropDownListFor(m => m.SelectedBreweryID, 
                      Model.Breweries,
                      new { @onchange   = "BreweryChanged();", 
                            @class      = "pulldown" })

到現在為止還挺好。 但是，最初顯示頁面時，在下拉菜單中選擇了一個啤酒廠，但是由於它沒有更改，因此不會觸發onchange事件，因此不會調用BreweryChanged函數。

有什么方法可以在初始頁面顯示中調用此JavaScript函數？

在這里參考此列表，我嘗試添加：-

@onload = "BreweryChanged();"

和

@onpageshow = "BreweryChanged();"

但是這些似乎沒有作用。 （其他事件看起來都沒有很大希望。）

Answer 1

准備好文檔時觸發BreweryChanged()應該具有預期的效果。 您說這有問題，所以我建議：

1. 等待頁面加載
2. 抓住下拉菜單
3. 盡管相同，但仍使用.value設置初始值-它應觸發該函數。

Answer 2

您需要訂閱一個jquery事件或javascript onload事件來執行此操作，因為沒有正確的“剃刀”方式。

用戶之一：

$(document).ready(function() {
       BreweryChanged();
});

要么：

document.addEventListener('DOMContentLoaded', function() {
     BreweryChanged();
}, false);

進一步編輯：

頁面的DOM完全加載后會調用document.addEventListener('DOMContentLoaded' ，它應該是第一個調用的JS方法。它是事件處理程序，因此如果您在BreweryChanged();上的開發人員控制台中斷點BreweryChanged();

您應該在加載內容時看到它的操作權

如果您在以下位置斷點：

document.addEventListener('DOMContentLoaded', function() {
     BreweryChanged();
}, false);

您將看到一個附加到javascript文檔對象的事件。 像這樣使用它：

<script>
  //global vars go here
  document.addEventListener('DOMContentLoaded', function() {
         BreweryChanged();
    }, false);
//rest of your logic and methods
</script>

false表示這不是只讀事件。 您可以提供另一個布爾值，以說明事件是否可清除，默認值不是。