Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
Normal select. The plugin will add the multiple="multiple" attribute automatically.
|
|
As link using btn btn-link.
|
|
Small button using btn btn-small.
|
|
Disabled using btn btn-primary disabled.
|
|
|
|
Multiple select within a group with add-ons. |
|
|
Multiple selects within a group. |
Basic markup used in the above examples:
<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>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'button': 'btn',
'width': 'auto',
'text': function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
}
});
});
</script>
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
| Option | Explanation | Usage |
|---|---|---|
text |
A function returning the string displayed if options are selected. All currently selected options are passed as argument. |
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'text': function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
}
});
});
</script>
|
button |
The width of the dropdown button. |
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'button': 'btn-primary btn-large',
});
});
</script>
|
width |
The width of the dropdown button.
Allowed formats:
|
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'width': '300px',
});
});
</script>
|