MVC 3 Razor 下拉更改简单的 Javascript答案

【问题标题】：MVC 3 Razor Dropdown Change Simple JavascriptMVC 3 Razor 下拉更改简单的 Javascript
【发布时间】：2012-03-21 15:32:37
【问题描述】：

我有一个 MVC3 Razor 应用程序，我试图在下拉列表更改时执行简单的 Javascript。

我的视图使用自定义帮助器，它根据数据类型返回正确的对象（枚举列表的下拉列表、二进制文件的单选按钮等）

以下助手：

@Html.RecipeEditorFor(model => model.Coating_Mode)

在 html 中呈现以下选择列表：

<div class="form-line">
    <div class="editor-field">
        <select id="Coating_Mode" name="Coating_Mode">
             <option value="1">Adhesive</option>
             <option selected="selected" value="2">SR</option>
             <option value="3">Inspection</option>
        </select>
    </div>
</div>

我希望只要更改选择列表的值时，就会执行一个简单的JavaScript：

<script type="text/javascript">
    $('#Coating_Mode').change(function () {
        alert("hello");
    }); 
</script>

我很乐意根据需要提供任何其他代码来帮助回答问题...

【问题讨论】：

你的脚本会在 DOM 加载后运行吗？
jsfiddle.net/HVMKU 你能详细说明你的问题吗？你提供的代码很好用，或者我误解了一些重要的东西。
您缺少 '$(document).ready(function()'

标签： jquery asp.net-mvc-3 razor jquery-events

【解决方案1】：

尝试将脚本更改为：

<script type="text/javascript">
    $(function () {
        $('#Coating_Mode').change(function () {
            alert("hello");
        });
    }); 
</script>

另外，如果您打算在 html 帮助器中使用 id，我建议您不要在选择器中使用 id。如果有多个项目需要它，请改用类选择器。

【讨论】：

很抱歉花了这么长时间才回复您，但这有效！如果我有能力将其标记为 anwer，我会的。
@user988148 不用担心 :-) 您应该可以单击左侧的勾号接受它作为答案？
我没有 15 的声望...不知道如何才能到达那里 - 猜猜这个菜鸟需要给你专家一些答案。

【解决方案2】：

听起来您的脚本在 DOM 完成加载之前正在运行 - 即，脚本放置在您的助手之前。

最好将任何 javascript 事件包装在 document ready event 中。然后脚本可以放在任何地方（尽管在头部或</body> 之前最合适）。

所以，把你的脚本改成这样，它应该可以工作了：

<script type="text/javascript">
    // This function won't fire until the DOM is completely loaded.
    $(document).ready(function() {

        $('#Coating_Mode').change(function () {
            alert("hello");
        }); 

    });
</script>

【讨论】：