
Bootstrap Multiselect is a plugin for jQuery and Bootstrap that allows the visitor to select multiple options from a dropdown select list containing the single options as checkboxes. Licensed under the Apache License, Version 2.0 & BSD 3-Clause.
Related plugins:
Basic Usage:
1. Include jQuery javascript library and Twitter's Bootstrap 3 framework on your page.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
2. Include jQuery bootstrap multiselect plugin on the page, after jQuery library.
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
3. Create a standard select list.
<select id="demo" multiple="multiple"> <option value="Javascript">Javascript</option> <option value="Python">Python</option> <option value="LISP">LISP</option> <option value="C++">C++</option> <option value="jQuery">jQuery</option> <option value="Ruby">Ruby</option> </select>
4. Call the plugin.
$(document).ready(function() { $('#demo').multiselect(); });
5. Options and defaults.
/** * Create a label. * * @param {jQuery} element * @returns {String} */ optionLabel: function(element){ return $(element).attr('label') || $(element).text(); }, /** * Triggered on change of the multiselect. * * Not triggered when selecting/deselecting options manually. * * @param {jQuery} option * @param {Boolean} checked */ onChange : function(option, checked) { }, /** * Triggered when the dropdown is shown. * * @param {jQuery} event */ onDropdownShow: function(event) { }, /** * Triggered when the dropdown is hidden. * * @param {jQuery} event */ onDropdownHide: function(event) { }, /** * Triggered after the dropdown is shown. * * @param {jQuery} event */ onDropdownShown: function(event) { }, /** * Triggered after the dropdown is hidden. * * @param {jQuery} event */ onDropdownHidden: function(event) { }, /** * Triggered on select all. */ onSelectAll: function() { }, enableHTML: false, buttonClass: 'btn btn-default', inheritClass: false, buttonWidth: 'auto', buttonContainer: '<div class="btn-group" />', dropRight: false, selectedClass: 'active', // Maximum height of the dropdown menu. // If maximum height is exceeded a scrollbar will be displayed. maxHeight: false, checkboxName: false, includeSelectAllOption: false, includeSelectAllIfMoreThan: 0, selectAllText: ' Select all', selectAllValue: 'multiselect-all', selectAllName: false, selectAllNumber: true, enableFiltering: false, enableCaseInsensitiveFiltering: false, enableClickableOptGroups: false, filterPlaceholder: 'Search', // possible options: 'text', 'value', 'both' filterBehavior: 'text', includeFilterClearBtn: true, preventInputChangeEvent: false, nonSelectedText: 'None selected', nSelectedText: 'selected', allSelectedText: 'All selected', numberDisplayed: 3, disableIfEmpty: false, delimiter: ', ', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>', ul: '<ul class="multiselect-container dropdown-menu"></ul>', filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>', filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>', li: '<li><a tabindex="0"><label></label></a></li>', divider: '<li class="multiselect-item divider"></li>', liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>' }
Change logs:
2017-12-18
- bugfix
2016-08-18
- v0.9.13
2016-07-30
- Fixed: deselect/select doesn't work with search when value is typed in search
2016-07-29
- Adding data-placeholder collapses multiselect
2016-07-23
- Fixed More issues with enableCollapsibleOptGroups
2016-04-23
- Allows different checkbox name for the same dropdown
2016-04-21
- fixed select all + clickable + collapsible issues.
2016-04-20
- bugfix
2016-04-18
- Some fixes and more tests for clickable and collapisble option groups.
v0.9.13 (2015-10-15)
- bugfix
2015-05-27
- Added option to collapse groups (some kind of sub menu)
- onChange is triggered for each (de)selected option separately.
2015-04-12
- fixed bugs.
2015-03-18
- v0.9.12
2015-03-01
2015-02-17
- update.
2015-02-14
- Add onSelectAll option
2015-02-13
- Support filter with clickable opt groups.
2014-11-02
- fixed an issue.
2014-10-13
- fixed an issue.
2014-08-08
- fix for IE 8.
2014-08-03
- Improve filter performance.
- Add onDropdownShown function call back.
2014-07-15
- Update
2014-05-24
- Update
2014-04-02
- Updated enable, disable demo.
2014-04-01
- templates can be overriden using configuration options.
2014-03-31
- update.
2014-03-13
- Bootstrap 3.1.1 update.
- Fixed bugs.
2014-03-12
- Bootstrap 3.1.1 update.
- Fixed bugs.
2014-02-07
- fixes.
2014-01-09
- Fixed bug When all options started as selected='selected', select all checkbox does not checked
2013-12-10
- Fixed bug when no options binding is given
This awesome jQuery plugin is developed by davidstutz. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 18.12.2017
- Source