Please consult the FAQ and the Issue Tracker before creating a new issue.
The demonstration page for Twitter Bootstrap 2.3 was removed. Nevertheless, this page should work using Twitter Bootstrap 2.3 except for some methods which are marked accordingly.
Please have a look at the Contribution Guidelines and the Issue Tracker.
First, the jQuery library needs to be included. Then Twitter Bootstrap - both the Javascript library and the CSS stylesheet - needs to be included.
<!-- Include Twitter Bootstrap and jQuery: --> <link rel="stylesheet" href="css/bootstrap.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> <!-- Include the plugin's CSS and JS: --> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
The jQuery library can also be included using a CDN, for example the Google CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Note that the plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the version.
Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multiple attribute as to get a real multiselect - but do not worry, the plugin can also be used as usual select without the multiple attribute being present.
<!-- Build your select: -->
<select id="example-getting-started" 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>
In the end, simply call the plugin on your select. You may also specify further options, see the Options tab for further information.
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('#example-getting-started').multiselect();
});
</script>
Use Firebug, Chrome Developer Tools to get the best out of the below examples.
multiple |
The following example shows the default behavior when the
<script type="text/javascript">
$('#example-single').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
If multiple options are selected in advance and the
<script type="text/javascript">
$('#example-single-selected').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single-selected">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
The following example shows the default behavior when the
<script type="text/javascript">
$('#example-multiple-selected').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-multiple-selected" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
The plugin naturally supports
<script type="text/javascript">
$('#example-multiple-optgroups').multiselect();
</script>
<select id="example-multiple-optgroups">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
|
enableClickableOptGroups |
If set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
});
</script>
|
disableIfEmpty |
If set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-disableIfEmpty').multiselect({
disableIfEmpty: true
});
});
</script>
|
dropRight |
The dropdown can also be dropped right.
<script type="text/javascript">
$(document).ready(function() {
$('#example-dropRight').multiselect({
buttonWidth: '400px',
dropRight: true
});
});
</script>
|
maxHeight |
The maximum height of the dropdown. This is useful when using the plugin with plenty of options.
The multiselect on the left uses
<script type="text/javascript">
$(document).ready(function() {
$('#example-with-maxHeight').multiselect({
maxHeight: 200
});
});
</script>
|
checkboxName |
The name used for the generated checkboxes. For more information on how to use the plugin as part of a form validated and used using server side scripting, as for example PHP, see Bootstrap Multiselect and POST. Related issues are discussed in the FAQ, in #323, in 331 and in 336.
<script type="text/javascript">
$(document).ready(function() {
$('#example-checkboxName').multiselect({
checkboxName: 'multiselect[]'
});
});
</script>
|
onChange |
A function which is triggered on the change event of the options. Note that the event is not triggered when selecting or deselecting options using the
<script type="text/javascript">
$(document).ready(function() {
$('#example-onChange').multiselect({
onChange: function(option, checked, select) {
alert('Changed option ' + $(option).val() + '.');
}
});
});
</script>
|
onDropdownShow |
A callback called when the dropdown is shown.
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-onDropdownShow').multiselect({
onDropdownShow: function(event) {
alert('Dropdown shown.');
}
});
});
</script>
|
onDropdownHide |
A callback called when the dropdown is closed.
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-onDropdownHide').multiselect({
onDropdownHide: function(event) {
alert('Dropdown closed.');
}
});
});
</script>
|
onDropdownShown |
A callback called after the dropdown has been shown.
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-onDropdownShown').multiselect({
onDropdownShown: function(event) {
alert('Dropdown closed.');
}
});
});
</script>
|
onDropdownHidden |
A callback called after the dropdown has been closed.
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-ondropdownHidden').multiselect({
onDropdownHidden: function(event) {
alert('Dropdown closed.');
}
});
});
</script>
|
buttonClass |
The class of the multiselect button.
<script type="text/javascript">
$(document).ready(function() {
$('#example-button-class').multiselect({
buttonClass: 'btn btn-link'
});
});
</script>
|
buttonContainer |
The container holding both the button as well as the dropdown.
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonContainer').multiselect({
buttonContainer: '<div class="btn-group" />'
});
});
</script>
|
buttonWidth |
The width of the multiselect button may be fixed using this option.
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonWidth').multiselect({
buttonWidth: '400px'
});
});
</script>
|
buttonText |
A callback specifying the text shown on the button dependent on the currently selected options.
The callback gets the currently selected
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonText').multiselect({
buttonText: function(options, select) {
if (options.length === 0) {
return 'No option selected ... ';
}
else if (options.length > 3) {
return 'More than 3 options selected! ';
}
else {
var labels = [];
options.each(function() {
if ($(this).attr('label') !== undefined) {
labels.push($(this).attr('label'));
}
else {
labels.push($(this).html());
}
});
return labels.join(', ') + ' ';
}
}
});
});
</script>
|
buttonTitle |
A callback specifying the title of the button.
The callback gets the currently selected
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonTitle').multiselect({
buttonText: function(options, select) {
return 'Check the title!';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function () {
labels.push($(this).text());
});
return labels.join(' - ');
}
});
});
</script>
|
nonSelectedText |
The text displayed when no option is selected. This option is used in the default
<script type="text/javascript">
$(document).ready(function() {
$('#example-nonSelectedText').multiselect({
nonSelectedText: 'Check an option!'
});
});
</script>
|
nSelectedText |
The text displayed if more than
<script type="text/javascript">
$(document).ready(function() {
$('#example-nSelectedText').multiselect({
nSelectedText: ' - Too many options selected!'
});
});
</script>
|
allSelectedText |
The text displayed if all options are selected.
<script type="text/javascript">
$(document).ready(function() {
$('#example-allSelectedText').multiselect({
allSelectedText: 'No option left ...'
});
});
</script>
|
numberDisplayed |
This option is used by the
<script type="text/javascript">
$(document).ready(function() {
$('#example-numberDisplayed').multiselect({
numberDisplayed: 1
});
});
</script>
|
label |
A callback used to define the labels of the options.
<script type="text/javascript">
$(document).ready(function() {
$('#example-label').multiselect({
label: function(element) {
return $(element).html() + '(' + $(element).val() + ')';
}
});
});
</script>
<select id="example-label" multiple="multiple">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
<option value="option-6">Option 6</option>
</select>
|
selectedClass |
The class(es) applied on selected options.
<style type="text/css">
#example-selectedClass-container li.multiselect-selected a label {
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectedClass').multiselect({
buttonContainer: '<div class="btn-group" id="example-selectedClass-container"></div>',
selectedClass: 'multiselect-selected'
});
});
</script>
|
includeSelectAllOption
|
Set to
To see an example using both the select all option and the filter, see the documentation of the
<script type="text/javascript">
$(document).ready(function() {
$('#example-includeSelectAllOption').multiselect({
includeSelectAllOption: true
});
});
</script>
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-includeSelectAllOption-optgroups').multiselect({
includeSelectAllOption: true
});
});
</script>
|
selectAllText
|
The text displayed for the select all option.
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
});
</script>
|
selectAllValue
|
The select all option is added as additional
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllValue').multiselect({
includeSelectAllOption: true,
selectAllValue: 'select-all-value'
});
});
</script>
|
enableFiltering
|
Set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableFiltering').multiselect({
enableFiltering: true
});
});
</script>
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableFiltering-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
});
</script>
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-example-enableFiltering-optgroups').multiselect({
enableFiltering: true
});
});
</script>
|
enableCaseInsensitiveFiltering
|
The filter as configured above will use case sensitive filtering, by setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCaseInsensitiveFiltering').multiselect({
includeSelectAllOption: true,
enableCaseInsensitiveFiltering: true
});
});
</script>
|
filterBehavior
|
The options are filtered based on their
In this example, the options have values from
<script type="text/javascript">
$(document).ready(function() {
$('#example-filterBehavior').multiselect({
enableFiltering: true,
filterBehavior: 'value'
});
});
</script>
<select id="example-filterBehavior" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 7</option>
<option value="g">Option 8</option>
<option value="h">Option 9</option>
<option value="i">Option 10</option>
<option value="j">Option 11</option>
<option value="k">Option 12</option>
<option value="l">Option 13</option>
<option value="m">Option 14</option>
<option value="n">Option 15</option>
</select>
|
filterPlaceholder
|
The placeholder used for the filter input.
<script type="text/javascript">
$(document).ready(function() {
$('#example-filter-placeholder').multiselect({
enableFiltering: true,
filterPlaceholder: 'Search for something...'
});
});
</script>
<select id="example-filterBehavior" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 7</option>
<option value="g">Option 8</option>
<option value="h">Option 9</option>
<option value="i">Option 10</option>
<option value="j">Option 11</option>
<option value="k">Option 12</option>
<option value="l">Option 13</option>
<option value="m">Option 14</option>
<option value="n">Option 15</option>
</select>
|
The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></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 href="javascript:void(0);"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
}
});
});
</script>
.multiselect('destroy')
|
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
<script type="text/javascript">
$(document).ready(function() {
$('#example-destroy').multiselect();
$('#example-destroy-button').on('click', function() {
$('#example-destroy').multiselect('destroy');
});
});
</script>
|
.multiselect('refresh')
|
This method is used to refresh the checked checkboxes based on the currently selected options within the
<script type="text/javascript">
$(document).ready(function() {
$('#example-refresh').multiselect();
$('#example-refresh-select').on('click', function() {
$('option[value="1"]', $('#example-refresh')).prop('selected', true);
$('option[value="3"]', $('#example-refresh')).prop('selected', true);
$('option[value="4"]', $('#example-refresh')).prop('selected', true);
alert('Option 1, 2 and 4.');
});
$('#example-refresh-deselect').on('click', function() {
$('option', $('#example-refresh')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
$('#example-refresh-button').on('click', function() {
$('#example-refresh').multiselect('refresh');
});
});
</script>
|
.multiselect('rebuild')
|
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
<script type="text/javascript">
$(document).ready(function() {
$('#example-rebuild').multiselect();
$('#example-rebuild-button').on('click', function() {
$('#example-rebuild').multiselect('rebuild');
});
$('#example-rebuild-add').on('click', function() {
$('#example-rebuild').append('<option value="add1">Addition 1</option>
<option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
});
$('#example-rebuild-delete').on('click', function() {
$('option[value="add1"]', $('#example-rebuild')).remove();
$('option[value="add2"]', $('#example-rebuild')).remove();
$('option[value="add3"]', $('#example-rebuild')).remove();
});
});
</script>
|
.multiselect('select', value)
|
Selects an option by its value. Works also using an array of values.
<script type="text/javascript">
$(document).ready(function() {
$('#example-select').multiselect();
$('#example-select-button').on('click', function() {
$('#example-select').multiselect('select', ['1', '2', '4']);
alert('Selected 1, 2 and 4.');
});
});
</script>
|
.multiselect('deselect', value)
|
Deselect an option by its value. Works also using an array of values.
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselect').multiselect();
$('#example-deselect-button').on('click', function() {
$('#example-deselect').multiselect('deselect', ['1', '2', '4']);
alert('Deselected 1, 2 and 4.');
});
});
</script>
|
.multiselect('selectAll', justVisible)
|
Selects all options. If
Note that setting
Currently, it is required to call
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAll').multiselect();
$('#example-selectAll-visible').on('click', function() {
$('#example-selectAll').multiselect('selectAll', true);
$('#example-selectAll').multiselect('updateButtonText');
});
$('#example-selectAll-all').on('click', function() {
$('#example-selectAll').multiselect('selectAll', false);
$('#example-selectAll').multiselect('updateButtonText');
});
});
</script>
|
.multiselect('deselectAll', justVisible)
|
Deselects all options. If
Note that setting
Currently, it is required to call
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', true);
$('#example-deselectAll').multiselect('updateButtonText');
});
$('#example-deselectAll-all').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', false);
$('#example-deselectAll').multiselect('updateButtonText');
});
});
</script>
|
.multiselect('updateButtonText')
|
When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
Note that usually this method is only needed when using
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('updateButtonText', true);
});
});
</script>
|
.multiselect('setOptions', options)
|
Used to change configuration after initializing the multiselect. This may be useful in combination with
<script type="text/javascript">
$(document).ready(function() {
var firstConfigurationSet = {
selectAll: {
enabled: false
},
filter: {
enabled: false
}
};
var secondConfigurationSet = {
selectAll: {
enabled: true
},
filter: {
enabled: true
}
};
var set = 1;
$('#example-setOptions').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example-setOptions').multiselect('setOptions', options);
$('#example-setOptions').multiselect('rebuild');
}
$('#example-setOptions-button').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
});
</script>
|
.multiselect('disable')
|
Disable both the underlying select and the dropdown button.
<script type="text/javascript">
$(document).ready(function() {
$('#example-disable').multiselect();
$('#example-disable-button').on('click', function() {
$('#example-disable').multiselect('disable');
});
});
</script>
|
.multiselect('enable')
|
Enable both the underlying select and the dropdown button.
<script type="text/javascript">
$(document).ready(function() {
$('#example-enable').multiselect();
$('#example-enable-button').on('click', function() {
$('#example-enable').multiselect('enable');
});
});
</script>
|
.multiselect('dataprovider', data)
|
This method is used to provide options programmatically. See the example below.
<script type="text/javascript">
$('#example-dataprovider').multiselect();
var options = [
{label: 'Option 1', title: 'Option 1', value: '1', selected: true},
{label: 'Option 2', title: 'Option 2', value: '2'},
{label: 'Option 3', title: 'Option 3', value: '3', selected: true},
{label: 'Option 4', title: 'Option 4', value: '4'},
{label: 'Option 5', title: 'Option 5', value: '5'},
{label: 'Option 6', title: 'Option 6', value: '6'}
];
$('#example-dataprovider').multiselect('dataprovider', options);
</script>
<select id="example-dataprovider" multiple="multiple"></select>
|
Using the onChange configuration option, the following example asks for confirmation if deselecting an option.
<script type="text/javascript">
$(document).ready(function() {
$('#example-confirmation').multiselect({
onChange: function(element, checked) {
if(checked === true) {
//action taken here if true
}
else if(checked === false) {
if(confirm('Do you wish to deselect the element?')) {
//action taken here
}
else {
$("#example-confirmation").multiselect('select', element.val());
}
}
}
});
});
</script>
Limit the number of selected options using the onChange option. The user may only select a maximum of 4 options. Then all other options are disabled.
<script type="text/javascript">
$(document).ready(function() {
$('#example-limit').multiselect({
onChange: function(option, checked) {
// Get selected options.
var selectedOptions = $('#example-limit option:selected');
if (selectedOptions.length >= 4) {
// Disable all other checkboxes.
var nonSelectedOptions = $('#example-limit option').filter(function() {
return !$(this).is(':selected');
});
var dropdown = $('#example-limit').siblings('.multiselect-container');
nonSelectedOptions.each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
}
else {
// Enable all checkboxes.
var dropdown = $('#example-limit').siblings('.multiselect-container');
$('#example-limit option').each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
}
});
});
</script>
Record the order the options are selected. When selecting an item an ordering number will be incremented and saved within the option.
<script type="text/javascript">
$(document).ready(function() {
var orderCount = 0;
$('#example-order').multiselect({
onChange: function(option, checked) {
if (checked) {
orderCount++;
$(option).data('order', orderCount);
}
else {
$(option).data('order', '');
}
},
buttonText: 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.push([$(this).text(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
return text.substr(0, text.length -2) + ' ';
}
},
});
$('#example-order-button').on('click', function() {
var selected = [];
$('#example-order option:selected').each(function() {
selected.push([$(this).val(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
text = text.substring(0, text.length - 2);
alert(text);
});
});
</script>
Simulate single selections using checkboxes. The behavior will be similar to a multiselect with radio buttons except that the selected option can be deselected again.
<script type="text/javascript">
$(document).ready(function() {
$('#example-simulate-single').multiselect({
on: {
change: function(option, checked) {
var values = [];
$('#example-simulate-single option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#example-simulate-single').multiselect('deselect', values);
}
}
});
});
</script>
Using a reset button together with a multiselect.
<script type="text/javascript">
$('#example-reset').multiselect();
$('#example-reset').on('reset', function() {
$('#example-reset option').each(function() {
$(this).prop('selected', false);
})
$('#example-reset').multiselect('refresh');
});
</script>
<form class="btn-group" id="example-reset-form">
<div class="btn-group">
<select id="example-reset" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button type="reset" id="example-reset-button" class="btn btn-default">Reset</button>
</div>
</form>
Multiselect can also be used in modals:
<script type="text/javascript">
$(document).ready(function() {
$('#example-modal').multiselect();
});
</script>
<button class="btn btn-default" data-toggle="modal" data-target="#example-modal-modal">Launch modal</button>
<div class="modal fade" id="example-modal-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Bootstrap Multiselect</h4>
</div>
<div class="modal-body">
<select id="example-modal" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
An example of using multiselect in an accordion/collapse:
Note that the overflow of the .panel needs to be visible: style="overflow:visible;". See the example below.
<script type="text/javascript">
$(document).ready(function() {
$('#example-collapse').multiselect();
});
</script>
<div class="panel-group" id="example-collapse-accordion">
<div class="panel panel-default" style="overflow:visible;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">
Bootstrap Multiselect
</a>
</h4>
</div>
<div id="example-collapse-accordion-one" class="panel-collapse collapse in">
<div class="panel-body">
<select id="example-collapse" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
Tab |
As with other form elements, Tab is used to switch to the next form elements. Tab can be used when the dropdown is opened as well as when it is closed. |
Space/Enter |
Space or Enter is used to open the dropdown and select options. After a multiselect is in focus, pressing Space or Enter will open the dropdown. Then, the options can be traversed using arrow up and down. |
Arrow Up/Arrow Down |
Used to traverse the options after opening the dropdown. An option can be selected using Space or Enter. |
return false; within the onChange option does not prevent the option from being selected/deselected ...return statement within the onChange method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the Further Examples section.
.multiselect('select', value); or .multiselect('deselect', value);?select occurs for other elements, as well. In addition this may be caused if the multiselect has the class .multiselect. See #330.
form.form-inline?select:
<select id="example2" multiple="multiple" name="select[]"></select>
Or add an appropriate name to the checkboxes:
$('#example2').multiselect({
checkboxName: 'multiselect[]'
});
.multiselect-container input {
display: none
}
$.validate?
var $form = $("#myForm");
var validator = $form.data('validator');
validator.settings.ignore = ':hidden:not(".multiselect")';
.multiselect('dataprovider', data) method?type="reset" button does not refresh the multiselect, what to do?select's in single selection mode with option's sharing values across the different select's.checkboxName:
$('.multiselect').multiselect({
checkboxName: _.uniqueId('multiselect_')
});
where _.uniqueId('multiselect_') should be replaced with a random generator. Alternatively, a unique value for checkboxName can be used for each multiselect.
TypeError: Cannot read property "toString" of ...?null or undefined is provided as argument of .multiselect('select', value) or .multiselect('deselect', value), see #386.
© 2012 - 2014 David Stutz - dual licensed: Apache License v2.0, BSD 3-Clause License