Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
Normal select. The plugin will add the multiple="multiple" attribute automatically. The first option is selected automatically by the browser when ommitting the multiple="multiple" attribute.
|
|
Select with preselected options: <option value="cheese" selected>Cheese</option>
|
|
As link using button: 'btn btn-link' .
|
|
Small button using button: 'btn btn-small' .
|
|
Disabled using button: 'btn btn-primary disabled' .
|
|
Multiple select within a group with add-ons and default container for the plugin: container: '<div class="btn-group" />' .
|
|
|
Multiple selects within a group using container: '<span class="dropdown" />' .
|
Using the onchange option you can add an event handler to the change event. The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one.
|
.multiselect('destroy') |
|
This method is used to destroy the plugin on the given element - meaning unbinding the plugin. |
.multiselect('refresh') |
|
This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click 'Select some options' so select some of the options (meaning added the selected attribute to some of the options). Then click refresh. The plugin will update the checkboxes accordingly.
|
Basic markup used in the above examples:
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'button': 'btn', 'width': 'auto', 'text': function(options) { if (options.length == 0) { return 'None selected'; } else if (options.length > 3) { return options.length + ' selected'; } else { var selected = ''; options.each(function() { selected += $(this).text() + ', '; }); return selected.substr(0, selected.length -2); } } }); }); </script> <select class="multiselect" 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> <div class="input-prepend input-append"> <span class="add-on"><b class="icon-list-alt"></b></span> <select class="multiselect" 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> <button class="btn btn-danger">Cancel</button> <button class="btn btn-success">Save</button> </div>
Option | Explanation | Usage |
---|---|---|
text |
A function returning the string displayed if options are selected. All currently selected options are passed as argument. |
<script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'text': function(options) { if (options.length == 0) { return 'None selected'; } else if (options.length > 3) { return options.length + ' selected'; } else { var selected = ''; options.each(function() { selected += $(this).text() + ', '; }); return selected.substr(0, selected.length -2); } } }); }); </script> |
button |
The width of the dropdown button. Default: btn . |
<script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'button': 'btn-primary btn-large', }); }); </script> |
width |
The width of the dropdown button. Default: auto .
Allowed formats:
|
<script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'width': '300px', }); }); </script> |
container |
The used container holding both the dropdown button and the dropdown menu. Default: <div class="btn-group" /> .
|
<script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'container': '<span class="dropdown" />', }); }); </script> |
onchange |
The used container holding both the dropdown button and the dropdown menu. Default: <div class="btn-group" /> .
|
<script type="text/javascript"> $(document).ready(function() { $('.multiselect').multiselect({ 'onchange': function(element, checked) { alert('Change event invoked!'); }, }); }); </script> |