Turn a Bootstrap Dropdown into Multi-Select Button using jQuery
The dropdown-checkboxes plug-in
The jQuery dropdown-checkboxes plug-in will turn a Bootstrap select dropdown into the multi-select input button where options are available with checkboxes.
This is a compact dropdown/button and a user may select one or more options by ticking the checkboxes. The selected checkbox/option values are stored in a hidden input field.
Developer’s page Download plug-in
Install the dropdown-checkboxes plug-in?
After downloading the plug-in, place its CSS file along with jQuery and Bootstrap CSS in the <head> section:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/dropdownCheckboxes/dropdownCheckboxes.min.css”>
(Size-wise, it is only useful if you already using the jQuery and Bootstrap in your project)
The markup:
Use the markup for the button and checkboxes as shown in the demo code below.
Initialize the plug-in
$(‘.btn-dropdown’).dropdownCheckboxes();
See the demo by clicking the link or image below. You can see a button with pre-selected values (jQuery, JavaScript, CSS). Press it and open the dropdown. There, you can see various options with checkboxes. The selected values are shown on top:
The markup starts with the button tag followed by checkboxes with labels:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="css/dropdownCheckboxes/dropdownCheckboxes.min.css"> <style> h2{ color: #fff; } </style> </head> <body> <div class='container'> <h1>dropdown-checkboxes</h1><BR> <form class='myform'> <div class="dropdown cq-dropdown" data-name='statuses'> <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="btndropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Your Expertise <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="btndropdown"> <li> <label class="radio-btn"> <input type="checkbox" value='jQuery' checked> jQuery </label> </li> <li> <label class="radio-btn"> <input type="checkbox" value='Bootstrap'> Bootstrap </label> </li> <li> <label class="radio-btn"> <input type="checkbox" value='HTML'> HTML </label> </li> <li> <label class="radio-btn"> <input type="checkbox" value='JavaScript' checked> JavaScript </label> </li> <li> <label class="radio-btn"> <input type="checkbox" value='CSS' checked> CSS </label> </li> <li class='text-center'> <button type='button' class='btn btn-xs btn-danger clear close-dropdown' value='Clear'>Clear</button> <button type='button' class='btn btn-xs btn-success save' value='Save'>Save</button> </li> </ul> </div> <BR> </form> <button type='button' class='btn btn-default btn-sm' onClick=" console.log( $('.myform').serialize() ) "> Console log current form values </button> </div> <BR><HR> </div> <script> $(function(){ $('.cq-dropdown').dropdownCheckboxes(); }); </script> <script src="js/dropdownCheckboxes/dropdownCheckboxes.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html> |
Copy/paste the above code in your editor.
How to retrieve selected data?
After the selection are made and data is saved in the form where this plug-in is used, the selected values can be retrieved as follows.
- In the markup, the data-name attribute is used in the top div wrapper. After the plug-in is initiated, a hidden input field with the name of that data-name’s value is created.
- As the values are saved after ticking the checkboxes in button dropdown, the value of the hidden input field is set to a JSON array.
Learn more about this plug-in by visiting the developer’s page.