Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 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
Introduction
  
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.

Description:
  
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="http://www.w3.org/1999/xhtml">
<head>
<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="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<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() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());
})
});
</script>
</div>
</form>
</body>
</html>
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

Demo


Download Sample Attached


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

Get the latest Asp.net, C#.net, 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

39 comments :

Anonymous said...

GREAT!!!!!!!!!!!!!!!!

Anonymous said...

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

Anonymous said...

nice article...

Unknown said...

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

Unknown said...

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

Anonymous said...

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

Unknown said...

Hello,

I need only one function of JQuery which gives Multiselection option I dont want to use this "http://code.jquery.com/jquery-1.8.2.js" 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 asp.net web controls??

Anonymous said...

"How is this helpful if you're using asp.net 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:
scripts/jq/jquery-ui.min.js
scripts/jq/jquery.mobile-1.4.3.min.js
css/jq/jquery.mobile.icons.min.css
css/jq/jquery.mobile.structure-1.4.3.min.css
css/jq/mobtheme.min.css (my personal generated theme css)

Unknown 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

Unknown 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() {
$('.chkveg').multiselect({
includeSelectAllOption: true
});

But this does not work

Anonymous said...

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

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

Unknown said...

hello, how can i bind select HTML control using javascript

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

test said...

How to uupdate this Listbox with checkbox

Unknown 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

Unknown said...

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

Unknown said...

How to add/remove new items in dropdown list

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

jishnu said...
This comment has been removed by the author.
Unknown said...

i want to select all item at page lode

Unknown said...

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

Apn said...

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

kumar said...

Hi Is it possible to angular js binded dropdown control

RAJA RAJ said...

I want this multiple select in add row function using jquery .can anyone help me?

Rahul said...

Hi Suresh, Nice article. I have one question "How can we clear previously filled items in a multi-select with checkbox control on changing the value of its parent multi-select with checkbox control?" like I am using two controls one is parent and another one is child and i am trying to fill child control dynamically on value change of parent control. How can i achieve that?

Akhilesh said...

$(document).ready(function () {

$.ajax({
type: "POST",
url: "/jquery_demo.aspx/ddlbind",
data: "{}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function (data) {
$('#chkveg').html(data.d);
$('#chkveg').multiselect({
includeSelectAllOption: true
});
},
error: function (response) {
console.log(response.status + ' ' + response.statusText);
alert(response.status + ' ' + response.statusText);
}
});

});

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

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