Javascript не работает с событием onchange раскрывающегося списка множественного выбора в asp.net MVC

Question

У меня ниже Razor Code в ASP.NET MVC view

<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>

Я что-то упустил ??

Answer 1

Ваш код 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 элемента с идентификатором rolesValues и ddlRoleValues. Тем не менее, эти идентификаторы не могут быть найдены в вашем произведенном HTML.

Таким образом, исходя из этой информации, ваш вопрос без ответа , потому что никакое количество кода не сможет выбрать ни один из этих элементов, поскольку они не существуют.

Answer 2

Как говорит Эрик Филип, это правда, что мой код генерирует автоматический идентификатор, но мы можем применить событие к классу вместо идентификатора. Вот как я этого добился. Я добавил строку ниже в моем $(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, и оно работает нормально.

Answer 3

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