menu search more_vert

ASP.NET | Multiselect Dropdown List With Checkboxes

watch_later 28 January, 2022
comment 1 Comment

In this article, I am going to explain how to implement multi-select drop-down list along with a checkbox in asp.net using jQuery. I will also explain about way to display the selected item/checked values of drop-down list.

In this tutorial, I will use jQuery plugin for the multi-select dropdown list. I noticed many of developers facing issue in the implementation of such requirement, sometimes they don't know the correct solutions for the same, So in this article I'll explain everything so everyone can learn and can able to implement such tasks as per the individuals requirement.

In my previous article I explained how to Bind Dropdownlist in ASP.NET MVC From Database Using Stored Procedure and  how to implement CRUD operations using Angular 12 with Web API and how to Export Data to CSV File Using ASP.NET MVC as well as how to convert DataTable to CSV file using ASP.NET that you might like to read.

I will also write some more informative and interesting articles on google form drop down list, imemory cache, dropdown in google forms, idistributed cache redis, contentful dropdown, shopify product variant dropdown, azure asp, add distributed sqlserver cache, shopify multiple variants dropdowns, entity framework postgresql, add stack exchange redis cache, google sheet drop down list, asp dot net, google sheets drop down list, aws asp, adding drop down in google sheets, google sheet data validation, web host builder, asp dotnet, inserting drop down in google sheets, add microsoft identity web api, configure web host defaults, create web host builder, creating a dropdown in google sheets, dropdown website, blazor dropdown, aspnetcorehostingmodel, creating a drop down list in google sheets, css dropdown menus, creating drop down list in google sheets, drop down windows, websites with drop down menus, creating drop down in google sheets, dropdown, aspx webforms, form dropdown, aspnet webforms, excel data validation list, drop down menus, google sheets drop down, drop down list in html, google sheets dropdown, microsoft netcore, drop down menus html, c# dot net, dropdown with search, faq dropdown, aspnet core 6, html drop down list, netcore 3.1, c# mvc core, google form dropdown from sheet, drop down ceiling ideas, azure dotnet, aspnet core 5, html dropdown form, asp core, aspnet, drop down ceiling installation, microsoft asp, netcore 6, razorpages, asp mvc, core dot net, asp net, signalr netcore, mvc 5, aspnet core mvc, mvc5, aspnet core, freeasphosting, entity framework mvc, aspnetmvc, drop down workbench, dot net microsoft, dotnet core, dropdown in windows form c#, usebrowserlink, mvc c#, dot net core, asp dotnet core, drop down bench, drop down table, dot net technology, dropdown angular, multiselect dropdown angular, dropdownlist, angular material dropdown, angular dropdown, dropdown in angular, dropdown in angular material, multi select dropdown in angular, angular multi select dropdown, drop down list in angular, creating drop down menus in excel, dot net for beginners, creating a drop down list in excel, select from drop down excel, mvc core, editing drop down list in excel, adding drop down list in excel, making a drop down list in excel, creating dropdown in excel, dotnet mvc, creating drop down in excel, mvc for beginners, excel drop down list, dropdown in excel, drop down menus in excel, adding dropdown in excel, drop down box in excel, making dropdown in excel, adding drop down in excel, dropdown in excel sheet, sheet drop down list that will make your web/software development process more easy and also helps you to upgrade your technical skills.

What is jQuery Bootstrap Multi-Select Plugin?


JQuery bootstrap multi-select drop-down list plugin allows the users/visitor to select multiple options from a drop-down select list containing the single options as checkboxes.

While you working with a web application with bootstrap some time within your form you need a control like a drop-down list with multiple checkboxes where you need to select multiple items based on checkbox selection, such as party name, date, list of fruits and etc based on your requirement.

Requirement

  1. Create bootstrap muli-select drop-down list with the checkbox selection.
  2. Allows the users/visitor to select multiple options from a drop-down list.
  3. The select list containing the single options as checkboxes.
  4. Selected Item should be displayed in the drop-down as comma separated string.
  5. If the count of Selected Item is greater then 3 then it should be displayed count of selected items in the drop-down.
  6. Display an alert box with selected item text and it's selected values on the click of the button.

Implementation


First, we need to include the jQuery library with our web page to use the multi-select plugin and also need to include stylesheet and Javascript library of bootstrap. here we will include these libraries using a CDN before end <head> tag.
<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>
Note: For using CDN you may have to adjust the version of CDN.

Now, we will simply use aspx control <asp:ListBox> to create our select input which you want to turn into a multi-select and remember that the multiple attributes as to get a real multi-select. Now, we just have to add list items to aspx control <asp:ListBox>.
<asp:ListBox ID="lstStudents" CssClass="dropdown dropdown-menu" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Nikunj Satasiya" Value="1" />
    <asp:ListItem Text="Ronak Rabadiya" Value="2" />
    <asp:ListItem Text="Hiren Dobariya" Value="3" />
    <asp:ListItem Text="Vivek Ghadiya" Value="4" />
    <asp:ListItem Text="Pratik Pansuriya" Value="5" />
    <asp:ListItem Text="Kishan Patel" Value="6" />
</asp:ListBox>
Now, simply I applying the jQuery bootstrap multi-select plugin to the aspx control <asp:ListBox> DropDownList control. and for that, we will write the following script before end <body> tag.
<script type="text/javascript">
    $(function () {
        $('[id*=lstStudents]').multiselect
        ({
            includeSelectAllOption: true
        });
    });
</script>
If you analyzed above script then there is Select all option is included and you can remove that Select all option as per your requirements/needs by setting includeSelectAllOption to false or by removing includeSelectAllOption as shown as below.
<script type="text/javascript">
    $(function () {
        $('[id*=lstStudents]').multiselect
        ({
            includeSelectAllOption: false
        });
    });
</script>
If you want to show default value on aspx control <asp:ListBox>(DropDownList control) so that user can understand this drop-down is for what. E.g, Select Students, Select Employees, Select Country, Select State and etc, then you can modify this script as follows.
<script type="text/javascript">
    $(function () {
        $('[id*=lstStudents]').multiselect
        ({
            includeSelectAllOption: true,
            nonSelectedText: 'Select Students' // Here you can change with your desired text as per your requirement.
        });
    });
</script>
Now, as per our requirement, we will display an alert box with selected item text and it's selected values on the click of the button. and for that, you need to add aspx button control within your web page.
<asp:Button Text="Submit Students" CssClass="btn btn-default btn-success" runat="server" OnClick="Submit" />
Now you can see our full HTML Markup look like something :

HTML Markup

<%@ 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>
    <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>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <h1 class="h2">Bootstrap Muli-Select Drop-Down List With The Checkbox Using JQuery</h1>
            <br>
            <asp:ListBox ID="lstStudents" CssClass="dropdown dropdown-menu" runat="server" SelectionMode="Multiple">
                <asp:ListItem Text="Nikunj Satasiya" Value="1" />
                <asp:ListItem Text="Ronak Rabadiya" Value="2" />
                <asp:ListItem Text="Hiren Dobariya" Value="3" />
                <asp:ListItem Text="Vivek Ghadiya" Value="4" />
                <asp:ListItem Text="Pratik Pansuriya" Value="5" />
                <asp:ListItem Text="Kishan Patel" Value="6" />
            </asp:ListBox>
            <div>
                <br>
                <asp:Button Text="Submit Students" CssClass="btn btn-default btn-success" runat="server" OnClick="Submit" />
            </div>
            <br>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('[id*=lstStudents]').multiselect
            ({
                includeSelectAllOption: true,
                nonSelectedText: 'Select Students' // Here you can change with your desired text as per your requirement.
            });
        });
    </script>
</body>
</html>
Now, to archive our requirement we will write following code in c# and vb.net.

C#

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

VB.NET

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 lstStudents.Items
            If item.Selected Then
                message += "Student Name : " + item.Text + ", Enrollment No : " + item.Value + "\n"
            End If
        Next
        ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert""alert('" & message & "');"True)
    End Sub
End Class

Explanation

If you analyzed the above code then I have used the foreach loop to get selected items from drop-down control and also declared string variable with name message, and simply add/concate the name of students and his/her enrollment no with string variable message. and finally as per our requirement this message displayed in the alert box.

Output

Multiselect Dropdown List With Checkboxes


Summary


This article explains how you can easily implement jquery multi-select drop-down list with a checkbox with bootstrap in asp.net with c# and vb.net and also can get selected item names and its value based on checkbox selection.

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

avatar

This code is not working as is and I tried to implement the same in my solution and it didn't work there.
Error: Uncaught Error: type property can't be changed

delete February 18, 2022 at 6:20 AM

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

sentiment_satisfied Emoticon

expand_less