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.
The complete documentation can be read on the following page.
HTML Markup
The following HTML Markup consists of an ASP.Net ListBox with some ListItem and a Button control.
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
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 href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/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.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.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 = ""
ForEach 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 3: Multiple Select DropDownList with CheckBoxes in ASP.Net]()
Demo
Downloads
