Skip to content

B
bootstrap-multiselect
Commit abdd6ab2 authored by David Stutz's avatar David Stutz
Browse files
Options

Updated documentation, added refresh method. 

Updated documentation concerning the new 'onchange' option and added a
refresh method.
parent 416bf64d
Hide whitespace changes
Inline Side-by-side
Showing with 678 additions and 569 deletions
README.md
View file @ abdd6ab2
# Bootstrap Multiselect
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.
## Examples
These examples can also be seen in action in index.html:
<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() {
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<p>
<select id="example1">
<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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<select id="example5" 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>
</p>
<p>
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</p>
<p>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" 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>
<select class="example7" multiple="multiple">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
</div>
</p>
## Configuration Options
**button**
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
});
**width**
The width of the dropdown button.
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
});
});
The width can be defined using all formats accepted by CSS:
100px
50%
auto
**text**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
$(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);
}
},
});
});
**container**
The used container holding both the dropdown button and the dropdown menu.
$('.multiselect').multiselect({
container: '<span class="dropdown" />',
});
## Methods
**.multiselect('destroy')**
This method will destroy - unbind - the plugin on the given element(s).
## Roadmap / Todo
* This solution for multiple selects is not usable for mobile devices (especially with touchscreen). ALternatives: Using Popovers instead of Dropdowns or checking for mobile devices and displaying normal select field (one row) for mobile devices.
## License
Copyright 2012 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](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.
# Bootstrap Multiselect
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.
## Examples
These examples can also be seen in action in index.html:
<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() {
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<p>
<select id="example1">
<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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<select id="example5" 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>
</p>
<p>
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</p>
<p>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" 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>
<select class="example7" multiple="multiple">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
</div>
</p>
## Configuration Options
**button**
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
});
**width**
The width of the dropdown button.
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
});
});
The width can be defined using all formats accepted by CSS:
100px
50%
auto
**text**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
$(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);
}
},
});
});
**container**
The used container holding both the dropdown button and the dropdown menu.
$(document).ready(function() {
$('.multiselect').multiselect({
container: '<span class="dropdown" />',
});
});
**onchange**
Assign an event handler to the change event:
$(document).ready(function() {
$('.multiselect').multiselect({
onchange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
});
## Methods
**.multiselect('destroy')**
This method will destroy - unbind - the plugin on the given element(s).
**.multiselect('refresh')**
Refresh the selected elements depending on the selected options within the select.
## Roadmap / Todo
* This solution for multiple selects is not usable for mobile devices (especially with touchscreen). ALternatives: Using Popovers instead of Dropdowns or checking for mobile devices and displaying normal select field (one row) for mobile devices.
## License
Copyright 2012 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](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.
index.html
View file @ abdd6ab2
<!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" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.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>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#example1').multiselect({
onchange:function(el, checked){alert('change event invoked!'); console.log(el, checked)}
});
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
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 class="page-header">
<h1>Examples</h1>
</div>
<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">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>
Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically. The first option is selected automatically by the browser when ommitting the <code>multiple="multiple"</code> attribute.
</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>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
</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>button: '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>button: 'btn btn-small'</code>.
</td>
</tr>
<tr>
<td>
<select id="example5" 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>
Disabled using <code>button: 'btn btn-primary disabled'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</td>
<td>
Multiple select within a group with add-ons and default container for the plugin: <code>container: '&lt;div class="btn-group" /&gt;'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" 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>
<select class="example7" multiple="multiple">
<option value="large">Extra Cheese</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
</div>
</td>
<td>
Multiple selects within a group using <code>container: '&lt;span class="dropdown" /&gt;'</code>.
</td>
</tr>
</table>
<div class="page-header">
<h1>Methods</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example8').multiselect({
container: '<span />',
});
$('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy');
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td><code>.multiselect('destroy')</code></td>
<td>
<div class="btn-group">
<select id="example8" 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 id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
</div>
</td>
<td>
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Code</h1>
</div>
<p>
Basic markup used in the above examples:
</p>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap-multiselect.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn&apos;,
&apos;width&apos;: &apos;auto&apos;,
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;input-prepend input-append&quot;&gt;
&lt;span class=&quot;add-on&quot;&gt;&lt;b class=&quot;icon-list-alt&quot;&gt;&lt;/b&gt;&lt;/span&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;
</pre>
<div class="page-header">
<h1>Options</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th width="30%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>button</code></td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn-primary btn-large&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>width</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>
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;width&apos;: &apos;300px&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>container</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;container&apos;: &apos;&lt;span class="dropdown" /&gt;&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<hr>
<div>
&copy; 2012
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
</div>
</div>
</body>
<!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" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.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>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
$('#example9').multiselect({
onchange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
});
</script>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
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 class="page-header">
<h1>Examples</h1>
</div>
<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">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>
Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically. The first option is selected automatically by the browser when ommitting the <code>multiple="multiple"</code> attribute.
</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>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
</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>button: '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>button: 'btn btn-small'</code>.
</td>
</tr>
<tr>
<td>
<select id="example5" 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>
Disabled using <code>button: 'btn btn-primary disabled'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</td>
<td>
Multiple select within a group with add-ons and default container for the plugin: <code>container: '&lt;div class="btn-group" /&gt;'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" 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>
<select class="example7" multiple="multiple">
<option value="large">Extra Cheese</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
</div>
</td>
<td>
Multiple selects within a group using <code>container: '&lt;span class="dropdown" /&gt;'</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>
</table>
<div class="page-header">
<h1>Methods</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example8').multiselect({
container: '<span />',
});
$('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy');
});
$('#example10').multiselect({
container: '<span />',
});
$('#example10-select').on('click', function() {
$('option[value="tomatoes"]', $('#example10')).attr('selected', true);
$('option[value="mushrooms"]', $('#example10')).attr('selected', true);
$('option[value="onions"]', $('#example10')).attr('selected', true);
alert('Selected Tomatoes, Mushrooms and Onions.');
});
$('#example10-deselect').on('click', function() {
$('option', $('#example10')).each(function(element) {
$(this).attr('selected', false);
})
});
$('#example10-refresh').on('click', function() {
$('#example10').multiselect('refresh');
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td><code>.multiselect('destroy')</code></td>
<td>
<div class="btn-group">
<select id="example8" 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 id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
</div>
</td>
<td>
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
</td>
</tr>
<tr>
<td><code>.multiselect('refresh')</code></td>
<td>
<div class="btn-group">
<select id="example10" 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 id="example10-select" class="btn">Select some options</button>
<button id="example10-deselect" class="btn">Deselect all</button>
<button id="example10-refresh" class="btn btn-primary">Refresh</button>
</div>
</td>
<td>
This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click &apos;Select some options&apos; so select some of the options (meaning added the <code>selected</code> attribute to some of the options). Then click refresh. The plugin will update the checkboxes accordingly.
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Code</h1>
</div>
<p>
Basic markup used in the above examples:
</p>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap-multiselect.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn&apos;,
&apos;width&apos;: &apos;auto&apos;,
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;input-prepend input-append&quot;&gt;
&lt;span class=&quot;add-on&quot;&gt;&lt;b class=&quot;icon-list-alt&quot;&gt;&lt;/b&gt;&lt;/span&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;
</pre>
<div class="page-header">
<h1>Options</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th width="30%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>button</code></td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn-primary btn-large&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>width</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>
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;width&apos;: &apos;300px&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>container</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;container&apos;: &apos;&lt;span class="dropdown" /&gt;&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;onchange&apos;: function(element, checked) {
alert(&apos;Change event invoked!&apos;);
},
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<hr>
<div>
&copy; 2012
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
js/bootstrap-multiselect.js
View file @ abdd6ab2
......@@ -117,6 +117,20 @@
this.select.show();
},
// Refreshs the checked options based on the current state of the select.
refresh: function() {
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$('ul li input[value="' + $(element).val() + '"]', this.container).attr('checked', true);
}
else {
$('ul li input[value="' + $(element).val() + '"]', this.container).attr('checked', false);
}
}, this));
$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>');
},
// Get options by merging defaults and given options.
getOptions: function(options) {
return $.extend({}, this.defaults, options);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment