aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Multiselect Dropdown list with Checkboxes or Multiple Select Dropdown with Checkboxes

Mar 27, 2014
Here I will explain jQuery multiselect dropdown list with checkbox using bootstrap multiselect plugin or multiple select dropdown with checkboxes in jQuery or dropdown with multiple checkbox options in jQuery. Bootstrap Multiselect is a JQuery based plugin which converts a simple dropdown list to multiple select/multi-select dropdown with checkboxes.

In previous posts I explained JavaScript send ampersand value in querystring,
jQuery Change style of controls, jQuery Add fade in effect to webpage, jQuery show html page content in popup window and many articles relating to JQuery. Now I will explain how to implement jQuery multiselect dropdown list with checkbox using bootstrap multiselect plugin.

To implement this functionality first create website and write following code in your aspx page

<html xmlns="">
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
includeSelectAllOption: true
$('#btnget').click(function() {
If you observe above code in header section I added js/bootstrap-2.3.2.min.js, js/bootstrap-multiselect.js and other files by using these files we can convert our dropdown to multi select dropdown with checkboxes. If you want these files you can get it from downloadable folder or get it from here bootstrap multiselect. If you observe script code in body tag I added like “$('#chkveg').multiselect()” to apply bootstrap multi select plugin to convert our dropdown to multi select options.

Once you completed all the coding run your application and check your output that will be like as shown below


Download Sample Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...


Anonymous said...

It is not working for me.........

Anonymous said...

nice article...

anand pillai said...

how to add those selected values to the database in sql server...??

amit pal said...

it is not working for me................................................................................

Anonymous said...

Nice one.. But it would have been more easy if there was some documentation

Ram Bodake said...


I need only one function of JQuery which gives Multiselection option I dont want to use this "" and bootstrap ??
Is it Possible ?? If yes please inform me ASAP.

Anonymous said...

not working in ie8 and 9

Anonymous said...

How is this helpful if you're using web controls??

Anonymous said...

"How is this helpful if you're using web controls?? "

To the above question:
For me with the jquery stylesheets and js already referenced for my page, all I had to to do to my existing asp:DropDownList control was add multiple="multiple" to it.
When I went to view it the check boxes rendered perfectly. Naturally you will want to change the Autopostback from true to false, if it is not set already. By the way, I did not have the js and css listed here.
Mine are:
css/jq/mobtheme.min.css (my personal generated theme css)

dinesh kumar said...

How to clear a value in multiselect dropdown list in jquery?

Anonymous said...

How can I bind this dropdown with selected items??

Anonymous said...

first step : use that code for selected items,
$('#chkveg option[value=yourvalue]').prop('selected', true);
seconde step use that after first step complete
$('#chkveg ').multiselect();

Anonymous said...

How to add onchange/onclick event for each checkbox using this plugin.

Anonymous said...

how can i read the multi select values in controller in MVC

Anonymous said...

i have tired this works fines but i want to clear selection in buttons onclientClick()

please help me

Paritosh Kadam said...

how to bind on edit mode previously selected values.

Anonymous said...

I want to implement onblur function on select with Id=chkveg please advice me how it is possible.I am trying from last 2 days but it's not possible.Please help me out

Satya Vatturi said...
This comment has been removed by the author.
Nikhil Gaur said...

Nice article but I want to make all dropdown in my page as multiselect. For example I want something like this:

$(function() {
includeSelectAllOption: true

But this does not work

Anonymous said...

If the control is inside an Update Panel, it displays as a listbox. Any work around?

Kinjal Solanki said...

Its give me the error like
Microsoft JScript runtime error: Object doesn't support property or method 'multiselect'

Tell me the solution.
It's urgent.

sudhir patil said...

hello, how can i bind select HTML control using javascript

Unknown said...

javascript runtime error: object doesn't support property or method 'multiselect'

guru said...

How to set the selectedvalues from db in Multi select dropdownlist?

Unknown said...

How to uupdate this Listbox with checkbox

shanmu shanmuk said...

how to stop filling the values in dropdown on select items in checkbox

Anonymous said...

Is it possible to add buttons(ok and cancel)in the dropdown.Can you please tell me

Cవ బోయిడి said...

That's Great... Its working pretty well... Thanks a lot....

Sampath Bej said...

How to add/remove new items in dropdown list

Ankit Prajapati said...

It's working but when i call option element in form of json object from another ajax, It does not work
Any suggestion for me would be great help

jquery River said...
This comment has been removed by the author.
Akash Choudhary said...

i want to select all item at page lode

Unknown said...

hello .. after clicking get selected values I want disable selected checkboxes

dheerendra dwivedi said...

i want to value,on selectedindexchanged event,not by button click

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.