Listbox multi select in asp.net web forms

Question

I have been researching for multiple select in a dropdown list in asp.net web forms. I have found several solutions but when I implement it on my system, it does not work. I am using Visual Studio 2019 by the way.

Here is my sample:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
     <script type="text/javascript">

         $(function () {
             $('[id*=listItemBox]').multiselect({
                 includeSelectAllOption: true
             });
         });

    </script>

<asp:ListBox ID="listItemBox" runat="server" SelectionMode="Multiple"></asp:ListBox>

This is the output of above.

But I want to do it like this

All answers I have been seeing are the same with my work above. But I do not know why it's not working in my end.

Thank in advance for the help!

Answer 1

Try changing

$('[id*=listItemBox]').multiselect({
                 includeSelectAllOption: true
             });

To

$('[id*=<%= listItemBox.ClientID %>]').multiselect({
                 includeSelectAllOption: true
             });

As ASP.NET can change element Id sometimes. To debug console.log($('[id*=<%= listItemBox.ClientID %>]'))