ASP.NET MVC表单加载时触发DropDownList onchange事件的方法

这是个很典型的场景——默认选中的下拉框没触发onchange事件，导致初始化时对应的啤酒列表没加载出来。你试过的@onload和@onpageshow没生效，大概率是因为这些事件的触发时机和DOM元素就绪的时机不匹配，或者事件绑定的对象不对。下面给你几个靠谱的解决方案：

方案一：利用DOM加载完成事件触发函数 #

当整个DOM树构建完成后再调用函数，确保下拉框元素已经存在且能被正确访问。原生JavaScript可以这么写：

document.addEventListener('DOMContentLoaded', function() {
    // 此时DOM已完全就绪，安全调用函数
    BreweryChanged();
});

如果你项目里用了jQuery，也可以用更简洁的写法：

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

方案二：将函数调用放在下拉框元素之后 #

直接在Razor生成的下拉框后面添加脚本块，确保脚本执行时下拉框已经渲染到页面上：

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

<script>
    // 下拉框已经存在，直接调用函数
    BreweryChanged();
</script>

这个方法逻辑简单，不需要依赖事件监听，只要保证脚本在元素之后执行就行。

方案三：检查BreweryChanged()函数的定义位置 #

另外要确认你的BreweryChanged()函数是在页面加载前就定义好的。如果函数放在页面底部的脚本文件里，而你之前尝试的onload事件绑定在头部元素上，可能会出现“函数未定义”的错误（可以打开浏览器控制台看看有没有相关报错）。这种情况下，把函数调用放在函数定义之后就能解决。

额外提示 #

如果你的BreweryChanged()函数里依赖下拉框的选中值，不用担心——从你的描述来看，Razor已经默认选中了某个啤酒厂，调用函数时能正常获取到选中项的值。

内容的提问来源于stack exchange，提问作者Brian Hooper