如何在加载窗体时调用DropDownList onchange事件

Question

我正在显示一个表单，它允许用户在Beer表中编辑或创建条目。为了帮助解决这个问题，表单有一个DropDownList，用于Brewery表中的啤酒厂。当下拉列表选择被更改时，新选择的啤酒厂的啤酒列表将被一些JavaScript显示在表单的其余部分旁边。下拉列表如下所示：-

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

到现在为止还好。但是，当页面最初显示时，下拉菜单中会选择一个啤酒厂，但是由于没有更改，所以没有触发onchange事件，因此没有调用BreweryChanged函数。

有任何方法可以在初始页面显示中调用这个JavaScript函数吗？

提到这个列表这里，我试着添加：-

@onload = "BreweryChanged();"

和

@onpageshow = "BreweryChanged();"

但这些似乎没有任何效果。(其他事件看上去都不太有希望。)

Answer 1

要做到这一点，您需要订阅jquery事件或javascript onload事件，因为没有正确的“剃刀”方法。

用户可以：

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

或：

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

进一步编辑：

当页面的DOM完全加载时调用document.addEventListener('DOMContentLoaded'，并且应该是第一个调用的JS方法。它是一个事件处理程序，所以如果您在BreweryChanged();上的developer控制台中的断点

当内容加载到时，您应该看到它的操作

如果你的断点是：

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声明它不是只读事件。您可以提供另一个布尔值，以声明如果事件是可清除的，则默认值不是。

Answer 2

在文档准备就绪时触发BreweryChanged()应该具有所需的效果。你说这有问题，所以我建议：

1. 等待页面加载
2. 抓住下坠
3. 使用.value设置初始值，尽管它是相同的-它应该触发函数。