In this article I will explain with an example, how to implement Bootstrap 5 Multiple Select (Multi-Select) DropDownList with CheckBoxes in ASP.Net using jQuery.
This article makes use of Bootstrap version 5.
 
 

Download jQuery Bootstrap Multi-Select Plugin

You will need to download the Bootstrap Multi-Select plugin files from the following location.
https://github.com/davidstutz/bootstrap-multiselect/
The complete documentation can be read on the following page.
https://davidstutz.github.io/bootstrap-multiselect/
 
 

HTML Markup

The HTML markup consists of following controls:
ListBox - For capturing value from DropDownList.
The ASP.Net ListBox has been set with SelectionMode property to Multiple.
The Button has been assigned with an OnClick event handler.
Note: It is very important to set the SelectionMode to Multiple otherwise instead of CheckBoxes you will see RadioButtons after the plugin is applied.
 
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
 
 

Applying the jQuery Bootstrap Multi-Select Plugin

Inside the HTML Markup, the following Bootstrap 5 and Bootstrap multi-select CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-multiselect.css
 
And then, the following Bootstrap 5 and Bootstrap multi-select JS files are inherited.
1. jquery.min.js
2. bootstrap.bundle.min.js
3. bootstrap-multiselect.js
 
Inside the jQuery document ready event handler, the jQuery Bootstrap Multi-Select Plugin is applied to the ListBox control.
The includeSelectAllOption property is set to True which adds a Select all CheckBox to the ListBox.
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*= lstFruits]').multiselect({
                 includeSelectAllOption:true,
                 templates: {
                     button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
                }
            });
        });
    </script>
 
 

Fetching the Text and Value of Selected Items on Server Side in ASP.Net

When the Submit button is clicked, following event handler is executed.
Inside this event handler, a loop is executed over the ListBox Items and its Selected property is checked.
If it returns True then, a message variable created with ListItem Text and Value property.
Finally, the selected Text and Value are displayed in JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
    string message = "";
    foreach (ListItem item in lstFruits.Items)
    {
        if (item.Selected)
        {
             message += item.Text + " " + item.Value + "\\n";
        }
    }
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
 
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
    Dim message As String  = ""
    For Each item As ListItem In lstFruits.Items
        If item.Selected Then
             message += item.Text + " " + item.Value + "\n"
        End If
    Next
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
 
 

Screenshot

Bootstrap 5: Multiple Select DropDownList with CheckBoxes in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions