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

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 3 and Bootstrap multi-select CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-multiselect.css
 
And then, the following Bootstrap 3 and Bootstrap multi-select JS files are inherited.
1. jquery.min.js
2. bootstrap.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/4.6.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.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
        });
    });
</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

Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net using jQuery
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions