Javascript not working with onchange event of multi select dropdownlist in asp.net MVC

Question

I have below Razor Code in 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>

And below is my javascript to catch change event for above dropdownlist which I put inside $(document).ready(function ()

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

        });

I have noticed that this event is not getting fired whenever there is change in selection of dropdownlist item.

and below is the HTML rendered in browser

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

Am I missing something??

Answer 1

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

Answer 2

As Erik Philip says it's true that my code generating auto ID but we can apply event on class instead of Id. Here how I achieved it. I added below line in my $(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');
}

Passed event to function and it is working fine.

Answer 3

Your MVC code:

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

Should produce 2 elements with the id of rolesValues and ddlRoleValues . However, those Ids are no where to be found in your produced HTML.

So based on this information your question is unanswerable because no amount of code will be able to select any of these elements since they do not exist.