下拉列表上的更改事件的值为空答案

【问题标题】：Value is null from change event on dropdownlist下拉列表上的更改事件的值为空
【发布时间】：2017-12-13 12:43:53
【问题描述】：

在DropDownListFor 上有一个changeEvent，它会触发事件的代码，但是所选项目为空，即$(this).val(); 是null

查看：

<script>
    $(function () {
        $("#selected_listBulletinBoardsMessages").change(function (e) {
            var val = $(this).val();          
            ..
        });
    });
</script>
<div>

    <div id="selected_listBulletinBoardsMessages">
        @Html.DropDownListFor(model => model.listBulletinBoardsMessages, Model.listBulletinBoardsMessages.Select(b => new SelectListItem() { Value = b.Department, Text = b.Department }), "All Departments", new { @class = "form-control" })
    </div>


</div>

我做错了什么？

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-5

【解决方案1】：

因为div 元素没有“值”。您需要 select 元素的值。理想情况下，您应该绑定到那个元素的 change 事件：

$("#selected_listBulletinBoardsMessages select").change(function (e) {
    var val = $(this).val();          
    ..
});

但是，如果出于此问题上下文之外的原因，您想像现在一样绑定到 div，那么您可以从其中的 select 获取值。您已经拥有的 e 事件变量可以让您到达那里。也许是这样的：

$("#selected_listBulletinBoardsMessages").change(function (e) {
    var val = $(e.target).val();          
    ..
});

当然，如果div 中有多个select 元素，这可能需要更改。不过，目前在您显示的代码中并非如此。

还要注意，这是基于DropDownListFor() 确实生成select 元素的假设。我无法想象为什么它不会，但我想这是可能的。您至少要做的是检查实际的 HTML 并查看其中的内容，以便改进用于访问该 HTML 的任何 JavaScript 代码。

【讨论】：

对于第二种情况，$(e.target).val() 会更合适
@A.Wolff：没错，我完全忘记了。谢谢！

【解决方案2】：

div 没有change 事件。

您应该监听select 的change 事件，因此将ID 指定为DropDownListFor 元素。

<div>
    @Html.DropDownListFor(model => model.listBulletinBoardsMessages, 
      Model.listBulletinBoardsMessages.Select(b => new SelectListItem() { Value = b.Department, Text = b.Department }),
     "All Departments", 
     new { @class = "form-control", 
           id="selected_listBulletinBoardsMessages" 
     })
</div>

【讨论】：

“div 没有更改事件” - 从技术上讲是正确的，尽管这样的事件肯定可以通过事件传播在 div 上捕获和处理。原始代码处理事件就好了，值根本不在那个元素上。
@David，我忽略了传播

【解决方案3】：

应该是这样的

<script>
$(function () {
    $("#selected_listBulletinBoardsMessages select").change(function (e) {
        var val = $(this).val();          
        ..
    });
});
</script>

因为您正在尝试调用 div change event 在这种情况下不应该存在。

【讨论】：