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

Question

我正在显示一个表单，允许用户在Beer中编辑或创建条目。 table 。为了帮助解决此问题，该表单有一个 DropDownList对于 Brewery 中的啤酒厂 table 。当下拉列表选择更改时，新选择的啤酒厂的啤酒列表会通过一些 JavaScript 与表单的其余部分一起显示。下拉列表的创建方式如下:-

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

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

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

引用此列表here我尝试添加:-

@onload = "BreweryChanged();"

和

@onpageshow = "BreweryChanged();"

但这些似乎没有效果。 (其他事件看起来都不太有希望。)

Answer 1

您需要订阅 jquery 事件或 javascript onload 事件才能执行此操作，因为没有“ Razor ”方法可以正确执行此操作。

用户:

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

或者:

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

进一步编辑:

当页面的 DOM 完全加载时，会调用 document.addEventListener('DOMContentLoaded')，并且应该是第一个调用的 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 表示它不是只读事件。您可以提供另一个 bool 值，以声明事件是否可清除，默认情况下不可清除。