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.
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.
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
Demo
 |
|
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 Email
|
|||
39 comments :
GREAT!!!!!!!!!!!!!!!!
It is not working for me.........
nice article...
how to add those selected values to the database in sql server...??
it is not working for me................................................................................
Nice one.. But it would have been more easy if there was some documentation
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.
not working in ie8 and 9
How is this helpful if you're using asp.net web controls??
"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)
How to clear a value in multiselect dropdown list in jquery?
How can I bind this dropdown with selected items??
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();
How to add onchange/onclick event for each checkbox using this plugin.
how can i read the multi select values in controller in MVC
i have tired this works fines but i want to clear selection in buttons onclientClick()
please help me
how to bind on edit mode previously selected values.
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
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
Thanks.
If the control is inside an Update Panel, it displays as a listbox. Any work around?
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.
hello, how can i bind select HTML control using javascript
javascript runtime error: object doesn't support property or method 'multiselect'
How to set the selectedvalues from db in Multi select dropdownlist?
How to uupdate this Listbox with checkbox
how to stop filling the values in dropdown on select items in checkbox
Is it possible to add buttons(ok and cancel)in the dropdown.Can you please tell me
That's Great... Its working pretty well... Thanks a lot....
How to add/remove new items in dropdown list
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
i want to select all item at page lode
hello .. after clicking get selected values I want disable selected checkboxes
i want to value,on selectedindexchanged event,not by button click
Hi Is it possible to angular js binded dropdown control
I want this multiple select in add row function using jquery .can anyone help me?
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?
$(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);
}
});
});
Note: Only a member of this blog may post a comment.