If you are interested in actively maintaining this project, please contact me (see GitHub profile for contact information).
Please consult the FAQ, the Issue Tracker or Stack Overflow before creating a new issue; when creating an issue or a pull request, read how to contribute first.
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>
Unofficial pluguins:
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>
Note that the classes of the
<script type="text/javascript">
$('#example-multiple-optgroups-classes').multiselect();
</script>
<select id="example-multiple-optgroups">
<optgroup label="Group 1" class="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" class="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>
|
enableHTML |
XSS injection is a serious threat for all modern web applications. Setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-xss').multiselect();
});
</script>
<select id="example-xss" multiple="multiple">
<option value="1"><script>alert(1);</script></option>
</select>
On the other hand, when setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-xss-html').multiselect();
});
</script>
<select id="example-xss-html" multiple="multiple">
<option value="1">>span style="color:red"<Option 1>/span></option>
</select>
|
enableClickableOptGroups |
If set to
When using
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
});
</script>
Note that this option does also work with disabled options:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups-disabled').multiselect({
enableClickableOptGroups: true
});
});
</script>
Note that the behavior of
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups-onChange').multiselect({
enableClickableOptGroups: true,
onChange: function(option, checked) {
alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
}
});
});
</script>
Note that the
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups-init').multiselect({
enableClickableOptGroups: true
});
});
</script>
|
enableCollapsibleOptGroups |
If set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
</script>
Both options, Note, however, that the behavior of combining both options might not be as expected - play around with the below example to get some intuition.
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true
});
});
</script>
The groups can be collapsed by default using the following simple trick:
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" class="btn-group" />'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
});
</script>
Combining the above with
Again, note, that the behavior of combining
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableFiltering: true,
includeSelectAllOption: true
});
});
</script>
|
collapseOptGroupsByDefault |
This option will collapse all There is also an example in the Further Examples section demonstrating an alternative way of collapsing
<script type="text/javascript">
$(document).ready(function() {
$('#example-collapseOptGroupsByDefault').multiselect({
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true
});
});
</script>
|
disableIfEmpty |
If set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-disableIfEmpty').multiselect({
disableIfEmpty: true
});
});
</script>
|
disabledText |
The text shown if the multiselect is disabled. Note that this option is set to the empty string
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText').multiselect({
disableIfEmpty: true,
disabledText: 'Disabled ...'
});
});
</script>
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText-disabled').multiselect({
disabledText: 'Disabled ...'
});
});
</script>
<select id="example-disabledText-disabled" multiple="multiple" disabled="disabled">
<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>
Note that selected options will still be shown:
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText-disabled-selected').multiselect({
disabledText: 'Disabled ...'
});
});
</script>
<select id="example-disabledText-disabled-selected" multiple="multiple" disabled="disabled">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<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>
|
dropRight |
The dropdown can also be dropped right.
<script type="text/javascript">
$(document).ready(function() {
$('#example-dropRight').multiselect({
buttonWidth: '400px',
dropRight: true
});
});
</script>
|
dropUp |
The dropdown can also be dropped up. Note that it is recommended to also set Note that this feature has been introduced in #594 and is known to have issues depending on the environment.
An example of automatically adding the
<script type="text/javascript">
$(document).ready(function() {
$('#example-dropUp').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
maxHeight: 400,
dropUp: true
});
});
</script>
<select id="example-dropUp" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option data-role="divider"></option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
|
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. See Server-Side Processing for details.
<script type="text/javascript">
$(document).ready(function() {
$('#example-checkboxName').multiselect({
checkboxName: function(option) {
return '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
Note that the behavior of
<script type="text/javascript">
$(document).ready(function() {
$('#example-onChange').multiselect({
onChange: function(option, checked, select) {
alert('Changed option ' + $(option).val() + '.');
}
});
});
</script>
|
onInitialized |
A function which is triggered when the multiselect is finished initializing.
<script type="text/javascript">
$(document).ready(function() {
$('#example-onInitialized-button').on('click', function() {
$('#example-onInitialized').multiselect({
onInitialized: function(select, container) {
alert('Initialized.');
}
});
});
});
</script>
<div class="btn-group">
<select id="example-onInitialized" 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 id="example-onInitialized-button" class="btn btn-primary">Activate!</button>
</div>
|
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-buttonClass').multiselect({
buttonClass: 'btn btn-link'
});
});
</script>
|
inheritClass |
Inherit the class of the button from the original select.
<script type="text/javascript">
$(document).ready(function() {
$('#example-inheritButton').multiselect({
inheritClass: true
});
});
</script>
<select id="example-inheritButton" class="bg-warning" 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>
|
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.
Actually,
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonWidth').multiselect({
buttonWidth: '400px'
});
});
</script>
Note that if the text in the button title is too long, it will be truncated and use an ellipsis
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonWidth-overflow').multiselect({
buttonWidth: '150px'
});
});
</script>
This does also work for long options:
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonWidth-overflow').multiselect({
buttonWidth: '150px'
});
});
</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 |
<script type="text/javascript">
$(document).ready(function() {
$('#example-allSelectedText').multiselect({
allSelectedText: 'No option left ...'
});
});
</script>
This option may be useful in combination with the
<script type="text/javascript">
$(document).ready(function() {
$('#example-allSelectedText-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
});
</script>
Note that the
<script type="text/javascript">
$(document).ready(function() {
$('#example-allSelectedText-allSelectedText-single').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
});
</script>
|
numberDisplayed |
This option is used by the The functionality can be disabled by setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-numberDisplayed').multiselect({
numberDisplayed: 1
});
});
</script>
|
delimiterText |
Sets the separator for the list of selected items for mouse-over. Defaults to ', '. Set to '\n' for a neater display.
<script type="text/javascript">
$(document).ready(function() {
$('#example-delimiterText').multiselect({
delimiterText '; '
});
});
</script>
|
optionLabel |
A callback used to define the labels of the options.
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionLabel').multiselect({
optionLabel: 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>
|
optionClass |
A callback used to define the classes for the
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container .odd:not(.active) {
background: #eeeeee;
}
</style>
<div id="example-optionClass-container">
<select id="example-optionClass" 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>
|
indentGroupOptions |
This option controls if options inside a
<script type="text/javascript">
$(document).ready(function() {
$('#example-indentGroupOptions').multiselect({
indentGroupOptions: false,
enableCollapsibleOptGroups: true
});
});
</script>
<div">
<select id="example-indentGroupOptions" 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>
|
selectedClass |
The class(es) applied on selected options.
<style type="text/css">
#example-selectedClass-container .multiselect-selected .form-check-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: 'active 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>
Note that the select all does not trigger the
<script type="text/javascript">
$(document).ready(function() {
$('#example-includeSelectAllOption-onChange').multiselect({
includeSelectAllOption: true,
onChange: function(option, checked) {
alert('Not triggered when clicking the select all!');
},
});
});
</script>
The select all element naturally respects disabled elements:
<script type="text/javascript">
$(document).ready(function() {
$('#example-includeSelectAllOption-disbled').multiselect({
includeSelectAllOption: true
});
});
</script>
|
selectAllJustVisible
|
Setting both
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllJustVisible').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
selectAllJustVisible: false
});
});
</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>
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllValue-numeric').multiselect({
includeSelectAllOption: true,
selectAllValue: 0
});
});
</script>
|
selectAllName
|
This option allows to control the name given to the select all option. See Server-Side Processing for more details.
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllName').multiselect({
includeSelectAllOption: true,
selectAllName: 'select-all-name'
});
});
</script>
|
selectAllNumber
|
If set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllNumber').multiselect({
includeSelectAllOption: true,
selectAllNumber: false
});
});
</script>
|
onSelectAll
|
This function is triggered when the select all option is used to select all options. Note that this can also be triggered manually using the
The options passed to the
Note that the
The
<script type="text/javascript">
$('#example-onSelectAll').multiselect({
includeSelectAllOption: true,
onSelectAll: function(options) {
alert('onSelectAll triggered, ' + options.length + ' options selected!');
}
});
</script>
|
onDeselectAll
|
This function is triggered when the select all option is used to deselect all options. Note that this can also be triggered manually using the
The options passed to the
Note that the
The
<script type="text/javascript">
$(document).ready(function() {
$('#example-onDeselectAll').multiselect({
includeSelectAllOption: true,
onDeselectAll: function(options) {
alert('onDeselectAll triggered, ' + options.length + ' options deselected!');
}
});
});
</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>
Clickable
<script type="text/javascript">
$(document).ready(function() {
$('#example-example-enableFiltering-enableClickableOptgroups').multiselect({
enableFiltering: true,
enableClickableOptGroups: true
});
});
</script>
Finally, the option can also be used together with
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableFiltering-onChange-onDropdownHide').multiselect({
enableFiltering: true,
onChange: function(option, checked) {
alert('onChange!');
},
onDropdownHide: function(event) {
alert('onDropdownHide!');
}
});
});
</script>
|
includeFilterClearBtn
|
If it is not desired to have a clear button for the search it can also be disabled.
<script type="text/javascript">
$(document).ready(function() {
$('#example-includeFilterClearBtn').multiselect({
enableFiltering: true,
includeFilterClearBtn: false
});
});
</script>
|
enableCaseInsensitiveFiltering
|
The filter as configured above will use case sensitive filtering, by setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCaseInsensitiveFiltering').multiselect({
enableCaseInsensitiveFiltering: true
});
});
</script>
|
enableFullValueFiltering
|
Set to
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableFullValueFiltering').multiselect({
enableFiltering: true,
enableFullValueFiltering: 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 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</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>
|
includeResetOption
|
Add reset button to dropdown.
<script type="text/javascript">
$(document).ready(function() {
$('#example-include-reset-option').multiselect({
includeResetOption: true
});
});
</script>
|
includeResetDivider
|
Add a divider between reset button and options.
<script type="text/javascript">
$(document).ready(function() {
$('#example-include-reset-divider').multiselect({
includeResetOption: true,
includeResetDivider: true
});
});
</script>
|
resetText
|
Defines the text of the reset button.
<script type="text/javascript">
$(document).ready(function() {
$('#example-reset-text').multiselect({
includeResetOption: true,
resetText: "Reset all"
});
});
</script>
|
widthSynchronizationMode
|
Synchronizes the width of the select button and the popup depending on the selected mode. Possible values are
<script type="text/javascript">
$(document).ready(function() {
$('#example-widthSynchronizationModeNever1').multiselect({
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeNever2').multiselect({
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeAlways1').multiselect({
widthSynchronizationMode: 'always',
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeAlways2').multiselect({
widthSynchronizationMode: 'always',
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeIfSmaller1').multiselect({
widthSynchronizationMode: 'ifPopupIsSmaller',
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeIfSmaller2').multiselect({
widthSynchronizationMode: 'ifPopupIsSmaller',
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeIfWider1').multiselect({
widthSynchronizationMode: 'ifPopupIsWider',
buttonWidth: '200px'
});
$('#example-widthSynchronizationModeIfWider2').multiselect({
widthSynchronizationMode: 'ifPopupIsWider',
buttonWidth: '200px'
});
});
</script>
<div class="mb-2">
<label>never</label>
<div>
<select id="example-widthSynchronizationModeNever1" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Long Long Long Long Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<select id="example-widthSynchronizationModeNever2" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="mb-2">
<label>always</label>
<div>
<select id="example-widthSynchronizationModeAlways1" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Long Long Long Long Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<select id="example-widthSynchronizationModeAlways2" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="mb-2">
<label>ifPopupIsSmaller</label>
<div>
<select id="example-widthSynchronizationModeIfSmaller1" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Long Long Long Long Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<select id="example-widthSynchronizationModeIfSmaller2" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="mb-2">
<label>ifPopupIsWider</label>
<div>
<select id="example-widthSynchronizationModeIfWider1" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Long Long Long Long Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<select id="example-widthSynchronizationModeIfWider2" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
|
buttonTextAlignment
|
Defines the text alignment in the button. Possible values are
<script type="text/javascript">
$(document).ready(function() {
$('#example-buttonTextAlignment-left').multiselect({
buttonTextAlignment: 'left'
});
$('#example-buttonTextAlignment-center').multiselect();
$('#example-buttonTextAlignment-right').multiselect({
buttonTextAlignment: 'right'
});
});
</script>
|
enableResetButton
|
Includes a reset button at the top of the multiselect which resets the selection to the original selection.
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableResetButton').multiselect({
enableResetButton: true,
enableFiltering: true,
includeSelectAllOption: true,
});
});
</script>
<select id="example-enableResetButton" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
|
enableResetButton
|
Changes the text of the reset button.
<script type="text/javascript">
$(document).ready(function() {
$('#example-resetButtonText').multiselect({
enableResetButton: true,
resetButtonText: 'Undo',
});
});
</script>
<select id="example-resetButtonText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
|
The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class .multiselect,
In addition, note that other options may also have influence on the templates, for example the buttonClass option.
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
popupContainer: '<div class="multiselect-container dropdown-menu"></div>',
filter: '<div class="multiselect-filter d-flex align-items-center"><i class="fas fa-sm fa-search text-muted"></i><input type="search" class="multiselect-search form-control" /></div>',
buttonGroup: '<div class="multiselect-buttons btn-group" style="display:flex;"></div>',
buttonGroupReset: '<button type="button" class="multiselect-reset btn btn-secondary btn-block"></button>',
option: '<button type="button" class="multiselect-option dropdown-item"></button>',
divider: '<div class="dropdown-divider"></div>',
optionGroup: '<button type="button" class="multiselect-group dropdown-item"></button>',
resetButton: '<div class="multiselect-reset text-center p-2"><button type="button" class="btn btn-sm btn-block btn-outline-secondary"></button></div>'
}
});
});
</script>
For example other elements instead of buttons may be used by adapting the template:
<script type="text/javascript">
$(document).ready(function() {
$('#example-templates-button').multiselect({
buttonContainer: '<div></div>',
buttonContainer: '',
buttonClass: '',
templates: {
button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">Click me!</span>'
}
});
});
</script>
<style type="text/css">
span.multiselect {
padding: 2px 6px;
font-weight: bold;
cursor: pointer;
}
</style>
The most interesting template is the li template as it allows to customize the displayed options; for example (see #738 for details) to include input elements in the options:
<script type="text/javascript">
$(document).ready(function() {
$('#example-templates-input').multiselect({
templates: {
li: '<a class"multiselect-option dropdown-item"><a><label style="display:inline;"></label><input type="text" /></a></a>'
}
});
});
</script>
The style of the plugin is fully adaptable through CSS; a completely rendered example is shown below - including select all option, filter and option groups.
<div class="multiselect-container dropdown-menu show">
<div class="multiselect-item multiselect-filter">
<div class="input-group input-group-sm p-1">
<div class="input-group-prepend">
<i class="input-group-text fas fa-search"></i>
</div>
<input class="form-control multiselect-search" type="text" placeholder="Search">
<div class="input-group-append">
<button class="multiselect-clear-filter input-group-text" type="button">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<a class="multiselect-option dropdown-item multiselect-item multiselect-all">
<span class="form-check d-inline-flex" title="Select all">
<input class="form-check-input" type="checkbox" value="multiselect-all">
<label class="form-check-label font-weight-bold">Select all</label>
</span>
</a>
<div class="multiselect-reset text-center p-2">
<a class="btn btn-sm btn-block btn-outline-secondary">Reset</a>
</div>
<div class="multiselect-item dropdown-divider mt-0"></div>
<a class="multiselect-item multiselect-group dropdown-item">
<input type="checkbox" value="undefined">
Fruits
<span class="caret-container dropdown-toggle pl-1"></span>
</a>
<a class="multiselect-option dropdown-item">
<span class="form-check d-inline-flex" title="Apple">
<input class="form-check-input" type="checkbox" value="Apple">
<label class="form-check-label">Apple</label>
</span></a>
<a class="multiselect-option dropdown-item">
<span class="form-check d-inline-flex" title="Banana">
<input class="form-check-input" type="checkbox" value="Banana">
<label class="form-check-label">Banana</label>
</span>
</a>
<a class="multiselect-item multiselect-group dropdown-item">
<input type="checkbox" value="undefined">
Vegetables
<span class="caret-container dropdown-toggle pl-1"></span>
</a>
<a class="multiselect-option dropdown-item">
<span class="form-check d-inline-flex" title="Potato">
<input class="form-check-input" type="checkbox" value="Potato">
<label class="form-check-label">Potato</label>
</span>
</a>
<a class="multiselect-option dropdown-item">
<span class="form-check d-inline-flex" title="Parsnip">
<input class="form-check-input" type="checkbox" value="Parsnip">
<label class="form-check-label">Parsnip</label>
</span>
</a>
</div>
The most important classes are: multiselect-container, multiselect-filter, multiselect-all, multiselect-item, multiselect-group, multiselect-option as well as disabled and active. Both for collapsing and filtering options, the classes multiselect-filter-hidden and multiselect-collapsible-hidden are used.
.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>
The method provides an additional parameter:
<script type="text/javascript">
$(document).ready(function() {
$('#example-select-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-button').on('click', function() {
$('#example-select-onChange').multiselect('select', '1', true);
});
});
</script>
The above parameter does also work when selecting multipe values. Note that
<script type="text/javascript">
$(document).ready(function() {
$('#example-select-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-array-button').on('click', function() {
$('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
});
});
</script>
It is also possible to select values in single selection mode.
<select id="example-select-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>
<script type="text/javascript">
$(document).ready(function() {
$('#example-select-single').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-single-button').on('click', function() {
$('#example-select-single').multiselect('select', ['3'], true);
});
});
</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>
The method provides an additional parameter:
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselect-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-button').on('click', function() {
$('#example-deselect-onChange').multiselect('deselect', '1', true);
});
});
</script>
The above parameter does also work when deselecting multiple options. Note that
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselect-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-array-button').on('click', function() {
$('#example-deselect-onChange-array').multiselect('deselect', ['1', '3'], true);
});
});
</script>
|
.multiselect('selectAll', justVisible)
|
Selects all options. If
Note that setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAll').multiselect({
includeSelectAllOption: true
});
$('#example-selectAll-visible').on('click', function() {
$('#example-selectAll').multiselect('selectAll', true);
});
$('#example-selectAll-all').on('click', function() {
$('#example-selectAll').multiselect('selectAll', false);
});
});
</script>
|
.multiselect('deselectAll', justVisible)
|
Deselects all options. If
Note that setting
<script type="text/javascript">
$(document).ready(function() {
$('#example-deselectAll').multiselect({
includeSelectAllOption: true
});
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', true);
});
$('#example-deselectAll-all').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', false);
});
});
</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-updateButtonText').multiselect({
buttonContainer: ''
});
$('#example-updateButtonText-select').on('click', function() {
$('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
$('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
$('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="1"]', $('#example-updateButtonText-container')).closest('.multiselect-option').addClass('active');
$('input[value="3"]', $('#example-updateButtonText-container')).closest('.multiselect-option').addClass('active');
});
$('#example-updateButtonText-update').on('click', function() {
$('#example-updateButtonText').multiselect('updateButtonText');
});
});
</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 = {
includeSelectAllOption: false,
enableFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: 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', disabled: true}
];
$('#example-dataprovider').multiselect('dataprovider', options);
</script>
<select id="example-dataprovider" multiple="multiple"></select>
The method is also able to handle
<script type="text/javascript">
$('#example-dataprovider-optgroups').multiselect();
var optgroups = [
{
label: 'Group 1', children: [
{label: 'Option 1.1', value: '1-1', selected: true},
{label: 'Option 1.2', value: '1-2'},
{label: 'Option 1.3', value: '1-3'}
]
},
{
label: 'Group 2', children: [
{label: 'Option 2.1', value: '1'},
{label: 'Option 2.2', value: '2'},
{label: 'Option 2.3', value: '3', disabled: true}
]
}
];
$('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
</script>
<select id="example-dataprovider-optgroups" multiple="multiple"></select>
You can add custom data attributes on option group children and non-grouped options:
$('#example-dataprovider-data-attributes').multiselect();
var optionsData =[
{
"label": "Option 1",
"value": 1,
"selected": true,
"attributes": {
"some-attribute": 1,
"another-attribute": false
}
},
{
"label": "Option 2",
"value": 2,
"selected": false,
"attributes": {
"some-attribute": 2
}
}
];
$("#example-dataprovider-data-attributes").multiselect('dataprovider', optionsData);
});
</script>
<select id="example-dataprovider-data-attributes" multiple="multiple"></select>
Renders as: <option value="1" label="Option 1" selected="selected" data-some-attribute="1" data-another-attribute="false"></option> <option value="2" label="Option 2" data-some-attribute="2"></option> |
.multiselect('setAllSelectedText', value)
|
This method is used to programmatically provide a new text to display in the button when all options are selected, at runtime.
<script type="text/javascript">
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#new-all-selected-text-btn').click(function(){
$('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
});
</script>
|
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>
The above approach can also be adapted to be used in
<script type="text/javascript">
$(document).ready(function() {
var lastSelected = $('#example-confirmation-single option:selected').val();
$('#example-confirmation-single').multiselect({
onChange: function(element, checked) {
if (confirm('Do you wish to change the selection?')) {
lastSelected = element.val();
}
else {
$("#example-confirmation-single").multiselect('select', lastSelected);
$("#example-confirmation-single").multiselect('deselect', 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');
});
nonSelectedOptions.each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('.multiselect-option').addClass('disabled');
});
}
else {
// Enable all checkboxes.
$('#example-limit option').each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('.multiselect-option').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">
$(document).ready(function() {
$('#example-reset').multiselect();
$('#example-reset-form').on('reset', function() {
$('#example-reset option:selected').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-outline-secondary" 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">
<h5 class="modal-title">Bootstrap Multiselect</h5>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</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 .card needs to be visible: style="overflow:visible;". See the example below.
<script type="text/javascript">
$(document).ready(function() {
$('#example-collapse').multiselect();
});
</script>
<div class="accordion" id="example-collapse-accordion">
<div class="card" style="overflow:visible;">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#example-collapse-accordion-one">
Bootstrap Multiselect
</button>
</h2>
</div>
<div id="example-collapse-accordion-one" class="collapse show">
<div class="card-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>
The examples below are aimed to demonstrate the performance of several features when using a large number of options:
includeSelectAllOption set to true.enableFiltering set to true.enableClickableOptGroups.
The below examples need to be activated. Note that this may take some time!
Use options:
<script type="text/javascript">
$(document).ready(function() {
$('#example-large-enable').on('click', function() {
var options = $('#example-large-options').val();
if (options < 1 || options > 5000) {
$('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
}
else {
$('#example-large-includeSelectAllOption').html('');
$('#example-large-includeSelectAllOption-enableFiltering').html('');
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
$('#example-large-reset').html('');
for (var j = 0; j < options; j++) {
i = j + 1;
$('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
$('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
var group = Math.floor(j/10) + 1;
var number = j % 10 + 1;
if (number === 1) {
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
}
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
$('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
}
$('#example-large-includeSelectAllOption').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-includeSelectAllOption-enableFiltering').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true
});
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true,
enableClickableOptGroups: true
});
$('#example-large-reset').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-reset-form').on('reset', function() {
$('#example-large-reset').multiselect('deselectAll', false);
$('#example-large-reset').multiselect('updateButtonText');
});
}
});
});
</script>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<form id="example-large-reset-form" style="margin-bottom:12px;">
<select id="example-large-reset" multiple="multiple">
<option value="1">Option 1</option>
</select>
<button type="reset" class="btn btn-default">Reset</button>
</form>
The following examples is aimed to demonstrate the performance of the .multiselect('dataprovider', data) for a large number of options.
The below examples need to be activated. Note that this may take some time!
$(document).ready(function() {
var data = [];
for (var i = 0; i < 100; i++) {
var group = {label: 'Group ' + (i + 1), children: []};
for (var j = 0; j < 10; j++) {
group['children'].push({
label: 'Option ' + (i + 1) + '.' + (j + 1),
value: i + '-' + j
});
}
data.push(group);
}
$('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({
maxHeight: 200
});
$('#example-large-dataprovider').multiselect('dataprovider', data);
});
});
<p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
<select id="example-large-dataprovider" multiple="multiple"></select>
The following example illsutrates how to disable options using JavaScript.
$(document).ready(function() {
$('#example-disable-javascript').multiselect();
});
<select id="example-disable-javascript" multiple="multiple"></select>
Performance example for using .multiselect('refresh') with a large number of options:
The below examples need to be activated. Note that this may take some time!
<script type="text/javascript">
$(document).ready(function() {
$('#example-large-refresh-button').on('click', function() {
for (var i = 0; i < 1000; i++) {
$('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
}
$('#example-large-refresh').multiselect();
});
$('#example-large-refresh-refresh').on('click', function() {
$('#example-large-refresh').multiselect('refresh');
});
$('#example-large-refresh-select').on('click', function() {
var count = 0;
$('#example-large-refresh option').each(function() {
var i = $(this).val();
if (i%2 == 0) {
$(this).prop('selected', true);
count++;
}
});
alert('Selected ' + count + ' options!');
});
});
</script>
The following example demonstrates how to limit the number of selections of a specific optgroup:
<script type="text/javascript">
$(document).ready(function() {
$('#example-optgroup-limit').multiselect({
onChange: function(options, checked) {
var $option = $(options);
if ($option.length == 1) {
var $group = $option.parent('optgroup')
if ($group.hasClass('group-1')) {
var $options = $('option', $group);
$options = $options.filter(':selected');
if (checked && $options.length > 2) {
alert('Cannot select more than 2 elements in this group!');
$("#example-optgroup-limit").multiselect('deselect', $option.val());
}
}
}
}
});
});
</script>
<div class="btn-group">
<select id="example-optgroup-limit" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" 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>
</div>
The below example demonstrates how to show the optgroup's label if all option's within this group are selected:
<script type="text/javascript">
$(document).ready(function() {
$('#example-optgroup-buttonText').multiselect({
buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
var $select = $(select);
var $optgroups = $('optgroup', $select);
var delimiter = this.delimiterText;
var text = '';
// Go through groups.
$optgroups.each(function() {
var $selectedOptions = $('option:selected', this);
var $options = $('option', this);
if ($selectedOptions.length == $options.length) {
text += $(this).attr('label') + delimiter;
}
else {
$selectedOptions.each(function() {
text += $(this).text() + delimiter;
});
}
});
var $remainingOptions = $('option:selected', $select).not('optgroup option');
$remainingOptions.each(function() {
text += $(this).text() + delimiter;
});
return text.substr(0, text.length - 2);
}
});
});
</script>
<div class="btn-group">
<select id="example-optgroup-buttonText" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" 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>
</div>
The following example demonstrates how to set the class active of input's parent element:
<script type="text/javascript">
$(document).ready(function() {
$('#example-selected-parents').multiselect({
buttonContainer: '<div id="example-selected-parents-container"></div>',
onChange: function(options, selected) {
// Get checkbox corresponding to option:
var value = $(options).val();
var $input = $('#example-selected-parents-container input[value="' + value + '"]');
// span label class:
if (selected) {
$input.closest('span').addClass('active');
}
else {
$input.closest('span').removeClass('active');
}
}
});
});
</script>
<style type="text/css">
#example-selected-parents-container span.active {
font-weight: bold;
}
</style>
<div class="btn-group">
<select id="example-selected-parents" 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>
The following example demonstrates how to clear filtering as soon as an option is selected after the filter was used. Note that the filter is cleared both when an option is selected and deselected.
<script type="text/javascript">
$(document).ready(function() {
$('#example-clear-after-filter-selection').multiselect({
buttonContainer: '',
enableFiltering: true,
onChange: function($option) {
// Check if the filter was used.
var query = $('#example-clear-after-filter-selection-container .multiselect-filter input').val();
if (query) {
$('#example-clear-after-filter-selection-container .multiselect-filter input').val('').trigger('keydown');
}
}
});
});
</script>
The following example demonstrates how to display a list of checkboxes without a dropdown:
<script type="text/javascript">
$(document).ready(function() {
$('#example-checkbox-list').multiselect({
buttonContainer: '<div id="example-checkbox-list-container"></div>',
buttonClass: '',
templates: {
button: '',
ul: '<div class="multiselect-container checkbox-list"></div>',
li: '<a class="multiselect-option text-dark text-decoration-none"></a>'
}
});
});
</script>
<style type="text/css">
#example-checkbox-list-container .checkbox-list > li > a {
display: block;
padding: 3px 0;
}
#example-checkbox-list-container .checkbox-list > .multiselect-option.active,
#example-checkbox-list-container .checkbox-list > .multiselect-option.active:hover,
#example-checkbox-list-container .checkbox-list > .multiselect-option.active:focus {
color: #333;
}
#example-checkbox-list-container .checkbox-list > .multiselect-option.disabled,
#example-checkbox-list-container .checkbox-list > .multiselect-option.disabled:hover,
#example-checkbox-list-container .checkbox-list > .multiselect-option.disabled:focus {
color: #777;
}
#example-checkbox-list-container .checkbox-list > .multiselect-option.disabled:hover,
#example-checkbox-list-container .checkbox-list > .multiselect-option.disabled:focus {
text-decoration: none;
cursor: unset;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
#example-checkbox-list-container .multiselect-container.checkbox-list {
position: static;
}
</style>
<div class="btn-group">
<select id="example-checkbox-list" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" disabled >Option 3</option>
<option value="4" selected >Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
The select can also be embedded into an input-group and input-group-sm:
<script type="text/javascript">
$(document).ready(function() {
$('#example-input-group').multiselect();
$('#example-input-group-sm').multiselect();
});
</script>
<div class="input-group">
<div class="input-group-prepend">
<span class"input-group-text">Prepend</span>
</div>
<select id="example-input-group" 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 class="input-group-append">
<span class"input-group-text">Append</span>
</div>
</div>
<div class="input-group input-group-sm mt-2">
<div class="input-group-prepend">
<span class"input-group-text">Prepend</span>
</div>
<select id="example-input-group-sm" 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 class="input-group-append">
<span class"input-group-text">Append</span>
</div>
</div>
The select can also be used inside of form-groups. The buttonContainer just needs to be extended with the class w-100:
<script type="text/javascript">
$(document).ready(function() {
$('#example-form-group').multiselect({
buttonContainer: '<div class="btn-group w-100" />'
});
});
</script>
<div class="form-group">
<label for"example-form-group">Select</label>
<select id="example-form-group" 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>
</select>
</div>
This examples shows how to make the filter/search input stick to the top:
<script type="text/javascript">
$(document).ready(function() {
$('#example-form-group').multiselect({
enableFiltering: true,
maxHeight: 200,
});
$('.multiselect-container .multiselect-filter', $('#example-fix-filter').parent()).css({
'position': 'sticky', 'top': '0px', 'z-index': 1,
})
});
</script>
<div class="form-group">
<label for"example-form-group">Select</label>
<select id="example-form-group" 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="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="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="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>
</select>
</div>
The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - download the repository and try it on a local server.
In order to receive the correct data after submitting the form, the used select has to have an appropriate name. Note that an [] needs to be appended to the name when using the multiple option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting checkboxName. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the selectAllName option. The value of the select all checkbox can be controlled by the selectAllValue option while the values of the remaining checkboxes correspond to the values used by the option's of the original select.
The plugin naturally supports the required attribute.
<script type="text/javascript">
$(document).ready(function() {
$('#example-post').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
buttonContainer: '<div class="btn-group w-100" />'
});
});
</script>
<form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label for="example-post">Multiselect</label>
<select id="example-post" name="multiselect[]" 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 class="form-group">
<label>Text Input</label>
<input type="text" name="text" class="form-control" placeholder="Text Input" />
</div>
<div class="form-group">
<div class="form-check">
<input id="checkbox" type="checkbox" name="checkbox" class="form-check-input">
<label class="form-check-label" for="checkbox">Checkbox</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input id="radio1" type="radio" name="radio" class="form-check-input">
<label class="form-check-label" for="radio1">Radio 1</label>
</div>
<div class="form-check">
<input id="radio2" type="radio" name="radio" class="form-check-input">
<label class="form-check-label" for="radio2">Radio 2</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
The checkboxName option can also be used to assign different names to the option's, for example for different optgroups.
Note that in the below example, $_POST will contain both the multiselect and the group1 as well as group2 keys.
<script type="text/javascript">
$(document).ready(function() {
$('#example-post-checkboxName').multiselect({
checkboxName: function(option) {
var $optgroup = $(option).closest('optgroup');
if ($optgroup.id == 'example-post-checkboxName-1') {
return 'group1[]';
}
else {
return 'group2[]';
}
}
});
});
</script>
<form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
<optgroup label="Group 1" id="example-post-checkboxName-1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup label="Group 1" id="example-post-checkboxName-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>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
The required attribute is supported:
<form>
<script type="text/javascript">
$(document).ready(function() {
$('#example-required').multiselect();
});
</script>
<select id="example-required" required 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 class="btn btn-primary" type="submit">Submit</button>
</form>
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. |
Enter |
Enter is used to open the dropdown and select options (for selecting options, Space can also be used, but will cause the multiselect to lose focus). After a multiselect is in focus, pressing 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 Enter. When enableFiltering is enabled, the search box is treated as the first option, meaning it can be selected by moving up "beyond" the first checkbox. |
index.html) and appropriate examples should be added.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?
// get all option elements
$('#example option:selected');
// get all option element values
$('#example option:selected').map(function(a, item){return item.value;});
select:
<select id="example2" multiple="multiple" name="select[]"></select>
Or add an appropriate name to the checkboxes:
$('#example2').multiselect({
checkboxName: function(option) {
return '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: function(option) {
return _.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.
Esc will not close the dropdown as there were some bugs with this.
optionLabel option as follows:
optionLabel: function(element){
return $(element).attr('label') || $(element).html();
},
This issue was discussed in #532.
The plugin depends upon the following standard knockout bindings: options, value, selectedOptions, enable, disable. When these options change, they will update the internal select element and .multiselect('refresh') is triggered.
options: when options is an observable and changes, the option's inside the select are updated by knockout and the plugin refreshes.value: can only be used in single selection mode; Knockout does not support using the value binding handler to update a select with multiple="multiple".selectedOptions: this is a standard knockout binding that updates the checked options inside the select element; use with multiple="multiple".enable: enable the plugin.disable: disable the plugin.Any other options inside the multiselect data bind are passed to the jQuery multiselect plugin.
var $ = require('jquery');
var multiselect = require('bootstrap-multiselect');
$.multiselect = multiselect;
$("#example").multiselect();
See the Issue Tracker.
For migrating your project to Bootstrap v4 follow the instructions from Bootstrap. Breaking changes for the bootstrap-multiselect are described in the following section:
In Bootstrap v4 Dropdown menus are no longer created with uls and lis but with divs and as.
The Dropdown of the multiselect was changed to work in the same way like it is recommended by Bootstrap.
To make template names indepedent of the concrete HTML structure they were also adapted:
ul was renamed to popupContainerli was renamed to optionliGroup was renamed to optionGroupfilter:
<script type="text/javascript">
$(document).ready(function() {
$('#example-legacyFiltering').multiselect({
enableFiltering: true,
templates: {
filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /><div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div></div></div>'
}
});
});
</script>
In Chrome checked checkboxes are highlighted in blue and also in Bootstrap v4 active dropdown items have a blue color. This led to the situation that checked checkboxes were almost not visible anymore.
Therefore the active color for dropdown items was changed a light grey.
If you would like to use the Bootstrap default color you can use the selectedClass option with the value multiselect-active-item-fallback:
<script type="text/javascript">
$(document).ready(function() {
$('#example-multiselect-fallback').multiselect({
selectedClass: "active multiselect-active-item-fallback"
});
});
</script>
Bootstrap dropped the Glyphicons icon font therefore the icons in the multiselect where changed to Font Awesome. To get the icons working you need to download Font Awesome and include the all.css or all.min.css into your project. If you change the location of the font files you may need to also adapt the paths at the end of all.css and all.min.css.
Copyright 2012 - 2021 David Stutz
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Copyright (c) 2012 - 2021 David Stutz
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
© 2012 - 2020 David Stutz, Impressum, Datenschutz - dual licensed: Apache License v2.0, BSD 3-Clause License