title: Javascript not working with onchange event of multi select dropdownlist in asp.net MVC
body: <p>I have below Razor Code in ASP.NET MVC view</p>
  
  <pre><code>&lt;div id="rolesValues" class="case-assignment-hide"&gt;       
          @Html.DropDownList("ddlRoleValues", new SelectList(@Model.Roles, "Key", "Value"), new {@id= "ddlRoleValues", @class = "form-control case-assignment-rule-use-values", multiple = "multiple" })
          &lt;span class="field-validation-valid help-block" data-valmsg-replace="true"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And below is my javascript to catch change event for above <code>dropdownlist</code> which I put inside <code>$(document).ready(function ()</code></p>
  
  <pre><code> $("#ddlRoleValues").on("change", function () {
              alert('I got the hit');
  
          });
  </code></pre>
  
  <p>I have noticed that this event is not getting fired whenever there is change in selection of <code>dropdownlist</code> item. </p>
  
  <p>and below is the HTML rendered in browser</p>
  
  <pre><code>&lt;div class="col-sm-4 case-assignment-rule-value-selection"&gt;
      &lt;div class="select2-container select2-container-multi form-control case-assignment-rule-values" id="s2id_ddlRoleValues"&gt;
          &lt;ul class="select2-choices"&gt;
              &lt;li class="select2-search-choice"&gt;
                  &lt;div&gt;Manager&lt;/div&gt;
                  &lt;a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="select2-search-field"&gt;
                  &lt;input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 34px;"&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;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."&gt;
          &lt;option value="aae"&gt;Manager&lt;/option&gt;
          &lt;option value="aad"&gt;Manager Supervisor&lt;/option&gt;
          &lt;option value="ab1"&gt;Accommodations Manager&lt;/option&gt;
          &lt;option value="ab0"&gt;Service Representative&lt;/option&gt;
          &lt;option value="84d"&gt;demo&lt;/option&gt;
          &lt;option value="ab2"&gt;Employee&lt;/option&gt;
          &lt;option value="ab4"&gt;Human Resource&lt;/option&gt;
          &lt;option value="aaf"&gt;Case Manager&lt;/option&gt;
          &lt;option value="ab3"&gt;Supervisor&lt;/option&gt;
      &lt;/select&gt;
      &lt;span class="field-validation-valid help-block" data-valmsg-replace="true" data-valmsg-for="CaseAssignmentRules[0].RuleValues"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am I missing something??</p>