Dropdown With Multiple CheckBox Select With jQuery In MVC 5

Bikesh Srivastava

25 Comments

Join the conversation! Your thoughts help the community grow.

Naqi Zaidi6y ago
Thanks for sharing useful information. but edit functionality code not work please help me to edit functionality
Aditya Sonone7y ago
I have used this and it works when I am using individual drop downs but I need concatenated dropdowns (country, state,city). so when i change the OPTIONS of STATE's SELECT through jquery on change of COUNTRY, STATE dropdown does not work. Can you help how it can be done
- Bikesh Srivastava7y ago
  Don't worry about that just you need to handle the j query ddl select event.
Holm7y ago
I've done this example to the letter and many other multiselect examples but all of them yield the same result. I only ever get a select box with options. Never a dropdown with checkboxes inside. What can I be doing wrong? I use MVC5 and .Net 4.8. I've tried to change .Net to 4.6 but that didnt do anything...
- Bikesh Srivastava7y ago
  I think you need to verify all scripts related jquery which is given as cdn.
Ketan Agnihotri7y ago
Can you please tell how it will work in edit view ?
- Bikesh Srivastava7y ago
  Yes you can do but you should have write custom code on edit
Arun Kumaar Mallesan8y ago
Hi, I would like to load the the collection from DB with "Selected" true for few options. But it seems not to be working with /cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js". Do you have any idea on that_?
Shushant Tyagi8y ago
How to set selected items?
- Arun Kumaar Mallesan8y ago
  Var selected = $("#"IDofElement" option:selected"); var message = ""; selected.each(function () { message += $(this).val() + ","; });
Farhan Ahmed8y ago
Just wow............
sudheer samudrala8y ago
How can we do the unselect in jquery on certain action? on dropdown change i want to clear the other multiselect values to clear??
- Bikesh Srivastava8y ago
  Reset the whole list.
Parmar Virendra8y ago
Thanks for sharing useful information.
Rahul8y ago
In my case, Radio buttons getting rendered inside dropdown instead of the checkboxes. I have included same two libraries one CSS and another one JS. and inside the document ready, i am calling multiselect method with dropdown id. Any help?
Sujit Jha9y ago
It is great article. But it is messing my other css as well. Please suggest how to apply those css in only this control .
Sandip Kumar9y ago
Hello, Bikesh Srivastava how to merge or combine two dropdownlist value in one in a view page.
Ravi Polara Patidar9y ago
Hello, Bikesh Srivastava How to Reverse Set Value in multiselect.
- Bikesh Srivastava9y ago
  Just uncheck checkbox and splice from list
Hari mca9y ago
I am not able to bind values dynamically using angular JS for this drop down. Could you please suggest?
Prasanna Murali10y ago
Nice post..
Bikesh Srivastava10y ago
Thanks to all
Manav Pandya10y ago
Great post sir ..
Vignesh Mani10y ago
Good One Bikesh
Madhanmohan Devarajan10y ago
Thanks for sharing useful information.

In this article, I will explain how to implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.NET with jQuery Bootstrap Multi-Select Plugin.

To actualize a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.NET, we should make use of ListBox control and apply jQuery Bootstrap Multi-Select Plugin to it.

If you are a beginner in ASP.NET MVC and jQuery, I am listing some important links to learn-

You can follow the simple steps, given below, to implement a Multiple Select DropdownList with CheckBox. I am creating a MVC Application and creating controller "Home".

In the next step, create an Action to open the view "Index". See the example, given below-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DropdownCheckbox.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}

Create view name as "Index.cshtml". See the example, given below-

@{
ViewBag.Title = "Home Page";
Layout = null;
}
<div>
<table>
<tr>
<td><p >Select Expert's Name </p></td>
<td>
<select id="EmpList" multiple="multiple">
<option value="1">Navdeep-Asp.net</option>
<option value="2">Pankaj-C#</option>
<option value="3">Bikesh-Asp.Net</option>
<option value="4">Pritam-Salesforce</option>
<option value="5">Payal-Salesforce</option>
<option value="6">Sujata-SSRS</option>
<option value="7">Harikant-UI</option>
</select>
</td>
<td><input type="button" id="btnSelected" value="Get Selected" /></td>
</tr>
</table>
</div>

In this article, I am using hard code value, but you can bind from the database. Afterwards, add jQuery Plugins or CDN, as shown below-

<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>

Use the references in your Application.

Afterwards, write JS code to implement multiselect with Checkbox in Dropdown. Use the code, given below-

<script type="text/javascript">
$(function () {
$('#EmpList').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#EmpList option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>

Set routing inside "route.config" file. See the code, given below-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace DropdownCheckbox
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}

Complete code

You can see and understand the complete code, given below-

@{
ViewBag.Title = "Home Page";
Layout = null;
}
<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 () {
$('#EmpList').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#EmpList option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>
<div>
<table>
<tr>
<td><p >Select Expert's Name </p></td>
<td>
<select id="EmpList" multiple="multiple">
<option value="1">Navdeep-Asp.net</option>
<option value="2">Pankaj-C#</option>
<option value="3">Bikesh-Asp.Net</option>
<option value="4">Pritam-Salesforce</option>
<option value="5">Payal-Salesforce</option>
<option value="6">Sujata-SSRS</option>
<option value="7">Harikant-UI</option>
</select>
</td>
<td><input type="button" id="btnSelected" value="Get Selected" /></td>
</tr>
</table>
</div>

Now, run the Application and see the output, as shown below-

According to the example, I can select any one or multiple choices. Also, you can see the count of the selected items.

We can see the item on the popup after clicking on "GetSelected".

I hope, you enjoyed this article and learned lots of things. If you have any confusion regarding these topics, you can download the project.