加载表单时如何调用 DropDownList onchange 事件

Question

我正在显示一个允许用户在Beer 表中编辑或创建条目的表单。为了帮助解决这个问题，该表格为Brewery 表中的啤酒厂提供了一个DropDownList。当下拉列表选择更改时，新选择的啤酒厂的啤酒列表将通过一些 JavaScript 与表单的其余部分一起显示。下拉列表是这样创建的：-

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

到目前为止，一切都很好。但是当页面最初显示时，下拉菜单中选择了一家啤酒厂，但由于它没有改变，因此不会触发 onchange 事件，因此不会调用 BreweryChanged 函数。

有什么方法可以在初始页面显示时调用这个 JavaScript 函数？

参考这个列表here我已经尝试添加：-

@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);

进一步编辑：

document.addEventListener('DOMContentLoaded' 在页面的 DOM 完全加载时调用，应该是第一个调用的 JS 方法。 它是一个事件处理程序，所以如果你在开发者控制台中的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 声明它不是只读事件。您可以提供另一个布尔值，以说明事件是否可清除，默认为不可清除。