Dropdown button overlay for selects.
Normal select. The plugin will add the multiple="multiple" attribute automatically.
|
|
| Simple multiple select. | |
|
|
Multiple select within a group with add-ons. |
|
|
Multiple selects within a group. |
Basic markup used in the above examples:
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect();
});
</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 |
|---|---|---|
none |
The text displayed if no option is selected. |
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
});
</script>
|
selected |
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({
'selected': function(options) {
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>
|
width |
The width of the dropdown button. |
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
'width': '300px', // In pixels
'width': '50%', // In percentage
});
});
</script>
|