title: How to display Multi select Listbox as dropdown in ASP.NET web forms
body: <p>I have the below code implemented, but the desired output is not rendered.
  The list boxes are used to filter the grid view. I can filter the grid view but the filters (list boxes) are being rendered as it is. I need them to be inside the dropdown.
  I have included the links to relevant resources in the head section, yet the control is rendered as a list box. I have seen this code work for many tutorials, why is it not working for me? Any help is appreciated</p>
  <pre><code>&lt;asp:Content ID=&quot;BodyContent&quot; ContentPlaceHolderID=&quot;MainContent&quot; runat=&quot;server&quot;&gt;
      
      &lt;link href=&quot;StyleSheet.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/resources/demos/style.css&quot;&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.jquery.com/ui/1.13.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
      &lt;link href = &quot;/bootstrap/css/bootstrap.min.css&quot; rel = &quot;stylesheet&quot;&gt;
      &lt;script src = &quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src = &quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
      &lt;script src=&quot;http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
  
          $(document).ready(function () {
  
              $(&quot;[id$=TextBox_From]&quot;).datepicker(
                  {
                      dateFormat: 'mm/dd/yy', autoclose: true
                  }
              );
              $(&quot;[id$=TextBox_To]&quot;).datepicker(
                  {
                      dateFormat: 'mm/dd/yy', autoclose: true
                  }
              );
  
              var FromDate = new Date(Session[&quot;start_date&quot;]);
  
              $(&quot;[id$=TextBox_From]&quot;).datepicker('setDate', FromDate);
              var ToDate = new Date(Session[&quot;end_date&quot;]);
              $(&quot;[id$=TextBox_To]&quot;).datepicker('setDate', ToDate);
  
              $(&quot;[id$=lstrpa_ticket_id]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstPortal_ID]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstRegion]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstMarket]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstClient]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $('#lstAgency').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstrequest_type]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstts_type]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lstcompleted_success]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lsttime_taken_validation]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $(&quot;[id$=lsttime_taken_preQA]&quot;).multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
              $('[id*=lst1]').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
          });
  
      &lt;/script&gt;
  </code></pre>
  <p>In the above code for some places I tried different ways to identify list box control in different ways for checking, yet both failed:</p>
  <pre><code>$(&quot;[id$=lstPortal_ID]&quot;).multiselect
  
  $('#lstAgency').multiselect
  </code></pre>
  <p>The control is rendered as :<a href="https://i.stack.imgur.com/lQBYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQBYP.png" alt="when id$=lstPortal_ID is used" /></a></p>
  <p><a href="https://i.stack.imgur.com/4I7Rr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4I7Rr.png" alt="when '#lstAgency' is used" /></a></p>
  <p>The desired output is like this <a href="https://i.stack.imgur.com/NLAZR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NLAZR.png" alt="desired output" /></a></p>