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

12 comments :

Anonymous said...

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

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

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)

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

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.