jQuery Multiple Select Plugin For Bootstrap - Bootstrap Multiselect

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.