Javascript不适用于asp.net MVC中多选下拉列表的onchange事件答案

【问题标题】：Javascript not working with onchange event of multi select dropdownlist in asp.net MVCJavascript不适用于asp.net MVC中多选下拉列表的onchange事件
【发布时间】：2019-10-31 06:13:18
【问题描述】：

我在 ASP.NET MVC 视图中有以下 Razor 代码

<div id="rolesValues" class="case-assignment-hide">       
        @Html.DropDownList("ddlRoleValues", new SelectList(@Model.Roles, "Key", "Value"), new {@id= "ddlRoleValues", @class = "form-control case-assignment-rule-use-values", multiple = "multiple" })
        <span class="field-validation-valid help-block" data-valmsg-replace="true"></span>
</div>

下面是我的javascript来捕捉上面dropdownlist的更改事件，我把它放在$(document).ready(function ()里面

 $("#ddlRoleValues").on("change", function () {
            alert('I got the hit');

        });

我注意到，只要dropdownlist 项目的选择发生变化，这个事件就不会被触发。

以下是浏览器中呈现的HTML

<div class="col-sm-4 case-assignment-rule-value-selection">
    <div class="select2-container select2-container-multi form-control case-assignment-rule-values" id="s2id_ddlRoleValues">
        <ul class="select2-choices">
            <li class="select2-search-choice">
                <div>Manager</div>
                <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a>
            </li>
            <li class="select2-search-field">
                <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 34px;">
            </li>
        </ul>
    </div>
    <select class="form-control case-assignment-rule-values select2-offscreen" id="CaseAssignmentRules[0].RuleValues" multiple="multiple" name="CaseAssignmentRules[0].RuleValues" tabindex="-1" data-val="true" data-val-required="This field is required.">
        <option value="aae">Manager</option>
        <option value="aad">Manager Supervisor</option>
        <option value="ab1">Accommodations Manager</option>
        <option value="ab0">Service Representative</option>
        <option value="84d">demo</option>
        <option value="ab2">Employee</option>
        <option value="ab4">Human Resource</option>
        <option value="aaf">Case Manager</option>
        <option value="ab3">Supervisor</option>
    </select>
    <span class="field-validation-valid help-block" data-valmsg-replace="true" data-valmsg-for="CaseAssignmentRules[0].RuleValues"></span>
</div>

我错过了什么吗？？

【问题讨论】：

您好 Vijay，我可以让您的代码按原样工作。您在 F12 控制台中有任何错误吗？您是否包含 jquery 脚本，并且在正确的位置/顺序？
是的，我进行了所有可能性的测试，但没有运气。控制台上也没有错误或警告
请在浏览器中发布为此下拉列表呈现的 HTML。由于select 控件在表单中的呈现方式，它可能会收到与您预期不同的名称和 ID。
好的，让我们再深入一点。请显示此功能的完整 js 脚本，您发布的内容缺少一些括号。另外，请告诉我们该脚本包含在哪里（在索引页面中？在它自己的文件中..？然后显示包含脚本的列表。
另外，请发布“角色”的模型定义

标签： javascript asp.net-mvc jquery-select2 html-select

【解决方案1】：

// Try using the class instead of id 
$(document).on("change", ".case-assignment-rule-values", function () {
alert('I got the hit');
});

【讨论】：

【解决方案2】：

正如 Erik Philip 所说，我的代码确实会生成自动 ID，但我们可以将事件应用于类而不是 Id。这是我如何实现的。我在$(document).ready(function () 中添加了以下行

$(this).parent().siblings('.case-assignment-rule-value-selection').find('select.case-assignment-rule-values').select2().on("change", function () {
  listToFilter(this);
);
 var listToFilter = function (e) {

        var selectedLength = $(e).select2('data');
}

将事件传递给function，它工作正常。

【讨论】：

【解决方案3】：

你的 MVC 代码：

<div id="rolesValues" class="case-assignment-hide">       
    @Html.DropDownList("ddlRoleValues", new SelectList(@Model.Roles, "Key", "Value"), new {@id= "ddlRoleValues", @class = "form-control case-assignment-rule-use-values", multiple = "multiple" })
    <span class="field-validation-valid help-block" data-valmsg-replace="true"></span>
</div>

应该产生 2 个 id 为 rolesValues 和 ddlRoleValues 的元素。但是，在您生成的 HTML 中找不到这些 ID。

因此，根据这些信息，您的问题无法回答，因为没有多少代码能够选择这些元素中的任何一个，因为它们不存在。

【讨论】：

实际上我不是动态传递事件，而是解决了问题。