alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
1,066 lines (1,017 loc) • 121 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style type="text/css">
table pre.prettyprint {
overflow-y: auto;
max-width: 500px;
max-height: 250px;
}
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="row">
<style type="text/css">
ul.nav-list > li > a {
padding: 4px 8px;
}
</style>
<div class="col-md-3">
<div class="well well-sm" style="margin-top:12px;">
<ul class="nav nav-list">
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li>
<li><a href="#faq">Frequently Asked Questions</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="page-header">
<h1>Bootstrap Multiselect</h1>
</div>
<p class="lead">
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.
</p>
</div>
</div>
<script>
$('.dropdown input, .dropdown label').click(function (event) {
event.stopPropagation();
});
</script>
<p class="alert alert-info">
The demonstration page for Bootstrap 2.3.x was removed. Nevertheless, this page should be working with Bootstrap 2.3.x as well except for some methods which are marked accordingly.
</p>
<p class="alert alert-warning">
Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>
<div class="page-header">
<h1><a id="getting-started"></a>Getting Started</h1>
</div>
<p>
The following code snippet will help you getting started.
</p>
<pre class="prettyprint linenums">
<!-- 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"/>
<!-- Build your select: -->
<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>
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect();
});
</script>
</pre>
<div class="page-header">
<h1><a id="examples"></a>Examples</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
window.prettyPrint() && prettyPrint();
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
buttonClass: 'btn btn-link'
});
$('#example4').multiselect({
buttonClass: 'btn btn-default btn-sm'
});
$('#example6').multiselect();
$('#example9').multiselect({
onChange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
for (var i = 1; i <= 100; i++) {
$('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
}
$('#example11').multiselect({
maxHeight: 200
})
$('#example13').multiselect();
$('#example14').multiselect({
buttonWidth: '500px',
buttonText: function(options) {
if (options.length === 0) {
return 'None selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
}
});
$('#example16').multiselect({
onChange: function(option, checked) {
if (checked === false) {
$('#example16').multiselect('select', option.val());
}
}
});
$('#example19').multiselect();
$('#example20').multiselect({
selectedClass: null
});
$('#example23').multiselect();
$('#example24').multiselect();
$('#example25').multiselect({
dropRight: true,
buttonWidth: '300px'
});
$('#example27').multiselect({
includeSelectAllOption: true
});
// Add options for example 28.
for (var i = 1; i <= 100; i++) {
$('#example28').append('<option value="' + i + '">' + i + '</option>');
}
$('#example28').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
maxHeight: 150
});
$('#example32').multiselect();
$('#example39').multiselect({
includeSelectAllOption: true,
enableCaseInsensitiveFiltering: true
});
$('#example41').multiselect({
includeSelectAllOption: true
});
for (var i = 1; i < 1000; i++) {
$('#example45').append('<option value="' + i + '">Option ' + i + '</option>');
}
$('#example45').multiselect({
includeSelectAllOption: true,
maxHeight: 150
});
$('#example46').multiselect({
checkboxName: 'multiselect-checkbox'
});
$('#example48').multiselect();
$('#example51').multiselect({
disableIfEmpty: true
});
$('#example51-rebuild').on('click', function () {
$('#example51').multiselect('rebuild');
});
$('#example51-add').on('click', function () {
$('#example51').append('<option value="cheese">Cheese</option><option value="tomato">Tomato</option>');
});
$('#example51-delete').on('click', function () {
$('option[value="cheese"]', $('#example51')).remove();
$('option[value="tomato"]', $('#example51')).remove();
});
$('#example53').multiselect();
$('#example53-select').on('click', function() {
$('#example53').multiselect('select', 'cheese');
});
$('#example53-deselect').on('click', function() {
$('#example53').multiselect('deselect', 'cheese');
});
});
</script>
<p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
</p>
<table class="table table-striped">
<tr>
<td>
<select id="example1">
<option value="cheese" selected>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>
</td>
<td width="50%">
Normal select. The plugin will do single selection using radio buttons rather than multiple selection using checkboxes.
</td>
</tr>
<tr>
<td>
<select id="example48" size="2">
<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>
</td>
<td>
Single selection without having the browser select the first option.
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example53" size="2">
<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-default" id="example53-select">Select cheese</button>
<button class="btn btn-default" id="example53-deselect">Deselect cheese</button>
</div>
</td>
<td>
The `.multiselect('select', value, triggerOnChange)` method can also be used to select options in single selection mode. Of course, the `.multiselect('deselect', value, triggerOnChange)` method works as expected, as well.
</td>
</tr>
<tr>
<td>
<select id="example2" multiple="multiple">
<option value="cheese" selected>Cheese</option>
<option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
Select with preselected options: <code><option value="cheese" selected>Cheese</option></code>
</td>
</tr>
<tr>
<td>
<select id="example27" 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>
</td>
<td>
Multiselect with a 'Select all' option.
</td>
</tr>
<tr>
<td>
<select id="example28" multiple="multiple"></select>
</td>
<td>
Multiselect with a 'Select all' option and filtering enabled using the <code>enableFiltering</code> option.
</td>
</tr>
<tr>
<td>
<select id="example41" multiple="multiple">
<option value="cheese" selected>Cheese</option>
<option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option>
<option value="mushrooms" selected>Mushrooms</option>
<option value="pepperoni" selected>Pepperoni</option>
<option value="onions" selected>Onions</option>
</select>
</td>
<td>
The 'Select all' option automatically repsonds to the selection of the user. In particular, it responds to the initial state of the select.
</td>
</tr>
<tr>
<td>
<select id="example45" multiple="multiple"></select>
</td>
<td>
Test the performance of the 'Select all' option with 999 options.
</td>
</tr>
<tr>
<td>
<select id="example3" 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>
</td>
<td>
As link using <code>buttonClass: 'btn btn-link'</code>.
</td>
</tr>
<tr>
<td>
<select id="example4" 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>
</td>
<td>
Small button using <code>buttonClass: 'btn btn-default btn-sm'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-group btn-group">
<span class="input-group-addon"><b class="glyphicon glyphicon-list-alt"></b></span>
<select id="example6" 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>
</td>
<td>
Multiple select within a group with add-ons and default container for the plugin: <code>buttonContainer: '<div class="btn-group" />'</code>.
</td>
</tr>
<tr>
<td>
<select id="example9" 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>
</td>
<td>
Using the <code>onChange</code> option you can add an event handler to the change event. The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one.
</td>
</tr>
<tr>
<td>
<select id="example11" multiple="multiple">
</select>
</td>
<td>
For long option lists the <code>maxHeight</code> option can be set.
</td>
</tr>
<tr>
<td>
<select id="example13" multiple="multiple">
<option value="enabled1">Enabled 1</option>
<option value="enabled2">Enabled 2</option>
<option value="disabled2" disabled="disabled">Disabled 1</option>
</select>
</td>
<td>
The plugin supports disabled options, too: <code>disabled="disabled"</code>
</td>
</tr>
<tr>
<td>
<select id="example14" 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>
</td>
<td>
Use the <code>buttonWidth</code> option to adjust the width of the button.
</td>
</tr>
<tr>
<td>
<select id="example16" 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>
</td>
<td>
Using the <code>onChange</code> option to prevent user from deselecting selected options.
</td>
</tr>
<tr>
<td>
<select id="example19" multiple="multiple">
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</td>
<td>
Option groups are detected automatically and for each option group an header element is added: <code><optgroup label="Mathematics">...</optgroup></code>
</td>
</tr>
<tr>
<td>
<select id="example23" multiple="multiple">
<option value="lab">Lab Course</option>
<option value="proseminar">Proseminar</option>
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</td>
<td>
Option groups and options without any group are supported simultaneously.
</td>
</tr>
<tr>
<td>
<select id="example20" 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>
</td>
<td>
Using the <code>selectedClass</code> option to turn off the active class for selected options.
</td>
</tr>
<tr>
<td>
<select id="example24" multiple="multiple">
<option value="analysis" label="Ana">Analysis</option>
<option value="algebra" label="LA">Linear Algebra</option>
<option value="discrete" label="Discrete">Discrete Mathematics</option>
<option value="numerical" label="NumA">Numerical Analysis</option>
<option value="probability" label="Proba">Probability Theory</option>
</select>
</td>
<td>
Specify an alternative label for the options: <code><option label="label"></option></code>
</td>
</tr>
<tr>
<td>
<div class="pull-left">
<select id="example25" multiple="multiple">
<option value="analysis" label="Ana">Analysis</option>
<option value="algebra" label="LA">Linear Algebra</option>
<option value="discrete" label="Discrete">Discrete Mathematics</option>
<option value="numerical" label="NumA">Numerical Analysis</option>
<option value="probability" label="Proba">Probability Theory</option>
</select>
</div>
</td>
<td>
Make the menu drop right instead of dropping left with <code>dropRight</code>.
</td>
</tr>
<tr>
<td>
<select id="example26" multiple="multiple" data-role="multiselect">
<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>
</td>
<td>
Using the <code>data-role="multiselect"</code> attribute for automatic wireup.
</td>
</tr>
<tr>
<td>
<select id="example31" multiple="multiple" data-role="multiselect" disabled>
<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>
</td>
<td>
The multiselect will adopt the state of the select: <code><select disabled></select></code>.
</td>
</tr>
<tr>
<td>
<select id="example32" multiple="multiple" tabindex="1">
<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>
</td>
<td>
The button will keep the <code>tabindex</code> of the select.
</td>
</tr>
<tr>
<td>
<select id="example39" multiple="multiple">
<option value="lab">Lab Course</option>
<option value="proseminar">Proseminar</option>
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</td>
<td>
Using <code>optgroups</code>s with filtering and the select all option.
</td>
</tr>
<tr>
<td>
<select id="example46" 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>
</td>
<td>
Use the <code>checkboxName</code> to adapt the <code>name</code> attribute of the used checkboxes.
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example51" multiple="multiple"></select>
<button id="example51-add" class="btn btn-default">Add options</button>
<button id="example51-delete" class="btn btn-default">Delete options</button>
<button id="example51-rebuild" class="btn btn-primary">Rebuild</button>
</div>
</td>
<td>
<p>
Automatically disable multiselect if it has no options.
</p>
</td>
</tr>
</table>
<div class="page-header">
<h1><a id="options"></a>Options</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th>Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options and the select are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
buttonText: function(options, select) {
if (options.length == 0) {
return this.nonSelectedText + ' <b class="caret"></b>';
}
else {
if (options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).html();
selected += label + ', ';
});
return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
}
}
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>numberDisplayed</code></td>
<td>This option can be used to define the number of displayed option before the text defined in <code>nSelectedText</code> is used. This option may not be available when using a custom <code>buttonText</code> function.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
numberDisplayed: 4
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>nonSelectedText</code></td>
<td>A string that is displayed when no options are selected.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
nonSelectedText: 'You have not selected any options'
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
buttonTitle: function(options, select) {
var selected = '';
options.each(function () {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length - 2);
},
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>buttonClass</code></td>
<td>The class of the dropdown button. Default: <code>btn</code>.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
buttonClass: 'btn-primary btn-lg'
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>buttonWidth</code></td>
<td>
The width of the dropdown button. Default: <code>auto</code>.
Allowed formats:
<ul>
<li><code>100px</code></li>
<li><code>50%</code></li>
<li><code>auto</code></li>
</ul>
If the width is defined using CSS the option should be set to <code>false</code>.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: '300px'
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>buttonContainer</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code><div class="btn-group" /></code>.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
buttonContainer: '<span class="dropdown" />'
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>label</code></td>
<td>Function to write the label of the item.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
label: function(element) {
return $(element).html()+' ('+$(element).val()+')';
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>selectedClass</code></td>
<td>The class applied to the parent <li> of selected items. Default: <code>active</code>.</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
selectedClass: null
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td>
This event handler is triggered when the selected options are changed.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
onChange: function(element, checked) {
alert('Change event invoked!');
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>onDropdownShow</code></td>
<td>
<p>
This event handler is triggered when the dropdown is shown.
</p>
<p class="alert alert-warning">
Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.x.
</p>
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
onDropdownShow: function(event) {
alert('Show event invoked!');
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>onDropdownHide</code></td>
<td>
<p>
This event handler is triggered when the dropdown is hidden.
</p>
<p class="alert alert-warning">
Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.x.
</p>
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
onDropdownHide: function(event) {
alert('Hide event invoked!');
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>onDropdownShown</code></td>
<td>
<p>
This event handler is triggered <i>after</i> the dropdown is shown.
</p>
<p class="alert alert-warning">
Both, the <code>onDropdownShown</code> and the <code>onDropdownHidden</code> options are not supported when using Twitter Bootstrap 2.3.x.
</p>
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
onDropdownShown: function(event) {
alert('Shown event invoked!');
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>onDropdownHidden</code></td>
<td>
<p>
This event handler is triggered <i>after</i> the dropdown are hidden.
</p>
<p class="alert alert-warning">
Both, the <code>onDropdownShown</code> and the <code>onDropdownHidden</code> options are not supported when using Twitter Bootstrap 2.3.x.
</p>
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
onDropdownHidden: function(event) {
alert('Hidden event invoked!');
}
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>maxHeight</code></td>
<td>
Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
maxHeight: 400
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>checkboxName</code></td>
<td>
Per default, this option is set to <code>false</code> and the generated checkboxes (or radio buttons) are not given any name. If not set to <code>false</code>, this option defines the name of all checkboxes (or radio buttons).
</td>
</tr>
<tr>
<td><code>includeSelectAllOption</code></td>
<td>
If set to <code>true</code> a 'Select all' option will be added.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
includeSelectAllOption: true
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllIfMoreThan</code></td>
<td>
If <code>includeSelectAllOption</code> is set to <code>true</code>, the select all option will be added if more than <code>includeSelectAllIfMoreThan</code> options are present. By default this option is set to <code>0</code>.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>selectAllText</code></td>
<td>
The label for the 'Select all' option.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
selectAllText: true
});
});
</script>
</pre>
</td>
</tr>
<tr>
<td><code>selectAllValue</code></td>
<td>
The value by which the select all option is identified.
</td>
<td>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
selectAllValue: 'multiselect-all',
});
});
</script>
</pre>
</td>
</tr>
<tr>