Question

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

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

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

有没有办法在初始页面显示上调用此JavaScript函数？

参考此列表here我尝试添加： -

@onload = "BreweryChanged();"

和

@onpageshow = "BreweryChanged();"

但这些似乎没有效果。（没有其他事件看起来很有希望。）

Answer 1

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

等待页面加载
抓住下拉列表
设置.value的初始值尽管它是相同的 - 它应该触发该功能。

Answer 2

您需要订阅jquery事件或javascript onload事件才能执行此操作，因为没有＆＃39; razor＆＃39;这样做的方式。

用户：

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

OR：

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表示它不是只读事件。你可以提供另一个布尔值，说明事件是否可清除，默认情况下不是。

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

2 个答案: