MultiSelect DropDownList With CheckBoxes In ASP.Net With C# And VB.NET Using jQuery Plugin

Nikunj Satasiya

10 Comments

Join the conversation! Your thoughts help the community grow.

praveen kumar5y ago
It says "jquery.min.js:2 Uncaught Error: type property can't be changed".Please help
NI cod5y ago
It says "jquery.min.js:2 Uncaught Error: type property can't be changed"
Syed Minhaj6y ago
How to select all items by default
Norbert Szolnoki6y ago
Sorry, but this doesn't work.
Innocent Rajadurai7y ago
Working fine but i want to add data from sql server database
Ramesh Thangamuthu7y ago
Working good. but i want to make the dropdown to show only 10 items. for more than 10 items i need to show scrolling bar. how can i do that?
Sandeep Raturi8y ago
Thanks how we can edit the same???
Sridhar John8y ago
It is not using properly..i didn't show any dropdown,,only show listbox only
- Ram Mourya8y ago
  Js not applied correctly. Please check
Nikhil Sangani8y ago
Good Article and thanks for sharing, its useful for beginner developers.

Introduction

In this blog, I am going to explain MultiSelect DropDownList with CheckBoxes in ASP.Net with C# and VB.NET using jQuery Plugin.

Recently, a few days ago, one of my classmates tried to implement MultiSelect DropDownList with CheckBoxes in ASP.Net but unfortunately, we couldn't find a better solution for that. He said there is one MultiSelect DropDownList with CheckBoxes but when he selects the checkbox, the checked value is not displayed in the drop-down list. Now, what he should do?

In this blog, I'll explain in brief how to create a multi-select DropDown list with CheckBoxes in ASP.NET with C# and VB.NET using jQuery Plugin.

So, let's take one example for demonstration.

For that, you need to download jQuery Bootstrap Multi-Select Plugin.

You can get the reference from the given link.

http://davidstutz.de/bootstrap-multiselect/

ASP.NET (HTML CODE)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MultiSelect DropDownList with CheckBoxes in ASP.Net</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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*=lstEmployee]').multiselect({
includeSelectAllOption: true
});
});
</script>
Employee : <asp:ListBox ID="lstEmployee" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Nikunj Satasiya" Value="1" />
<asp:ListItem Text="Dev Karathiya" Value="2" />
<asp:ListItem Text="Hiren Dobariya" Value="3" />
<asp:ListItem Text="Vivek Ghadiya" Value="4" />
<asp:ListItem Text="Pratik Pansuriya" Value="5" />
</asp:ListBox>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
</form>
</body>
</html>

Script

<script type="text/javascript">
$(function () {
$('[id*=lstEmployee]').multiselect({
includeSelectAllOption: true
});
});
</script>

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CS : System.Web.UI.Page
{
protected void Submit(object sender, EventArgs e)
{
string message = "";
foreach (ListItem item in lstEmployee.Items)
{
if (item.Selected)
{
message += item.Text + " " + item.Value + "\\n";
}
}
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}
}

VB.NET Code

Partial Class VB
Inherits System.Web.UI.Page
Protected Sub Submit(sender As Object, e As EventArgs)
Dim message As String = ""
For Each item As ListItem In lstEmployee.Items
If item.Selected Then
message += item.Text + " " + item.Value + "\n"
End If
Next
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
End Class

Output

Summary

Using Query Bootstrap Multi-Select Plugin, you can easily create MultiSelect DropDownList with checkboxes in ASP.NET.