Skip to content

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

Scrollbar support, option names. 

Added support for adding a maximum height property to the dropdown list.
Renamed some options.
parent d0293455
Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 73 deletions
README.md
View file @ f765ca73
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
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. 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.
**Note:** The option names may have changed due to the latest updates.
## Demo ## Demo
A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/). A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/).
...@@ -22,17 +24,17 @@ These examples can also be seen in action in index.html: ...@@ -22,17 +24,17 @@ These examples can also be seen in action in index.html:
$('#example1').multiselect(); $('#example1').multiselect();
$('#example2').multiselect(); $('#example2').multiselect();
$('#example3').multiselect({ $('#example3').multiselect({
button: 'btn btn-link' buttonClass: 'btn btn-link'
}); });
$('#example4').multiselect({ $('#example4').multiselect({
button: 'btn btn-small' buttonClass: 'btn btn-small'
}); });
$('#example5').multiselect({ $('#example5').multiselect({
button: 'btn btn-primary disabled' buttonClass: 'btn btn-primary disabled'
}); });
$('#example6').multiselect(); $('#example6').multiselect();
$('.example7').multiselect({ $('.example7').multiselect({
container: '<span class="dropdown" />', buttonContainer: '<span class="dropdown" />',
}); });
}); });
</script> </script>
...@@ -124,23 +126,23 @@ These examples can also be seen in action in index.html: ...@@ -124,23 +126,23 @@ These examples can also be seen in action in index.html:
## Configuration Options ## Configuration Options
**button** **buttonClass**
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information. 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() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
'none': 'select something...' buttonClass: 'btn btn-small'
}); });
}); });
**width** **buttonWidth**
The width of the dropdown button. The width of the dropdown button.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
'width': 'auto', // Default buttonWidth: 'auto', // Default
}); });
}); });
...@@ -150,53 +152,64 @@ The width can be defined using all formats accepted by CSS: ...@@ -150,53 +152,64 @@ The width can be defined using all formats accepted by CSS:
50% 50%
auto auto
**text** **buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter. Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
'text': function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected'; return 'None selected <b class="caret"></b>';
} }
else if (options.length > 3) { else if (options.length > 3) {
return options.length + ' selected'; return options.length + ' selected <b class="caret"></b>';
} }
else { else {
var selected = ''; var selected = '';
options.each(function() { options.each(function() {
selected += $(this).text() + ', '; selected += $(this).text() + ', ';
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
} }
}, },
}); });
}); });
**container** **buttonContainer**
The used container holding both the dropdown button and the dropdown menu. The used container holding both the dropdown button and the dropdown menu.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
container: '<span class="dropdown" />', buttonContainer: '<span class="dropdown" />',
}); });
}); });
**onchange** **onChange**
Assign an event handler to the change event: Assign an event handler to the change event:
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
onchange:function(element, checked){ onChange:function(element, checked){
alert('Change event invoked!'); alert('Change event invoked!');
console.log(element); console.log(element);
} }
}); });
}); });
**maxHeight**
Define the maximum height property of the dropdown list. If the maximum height of the option list is exceeded a scrollbar will be displayed.
$(document).ready(function() {
$('.multiselect').multiselect({
// Or false for no maximum height.
maxHeight: 400,
});
});
## Methods ## Methods
**.multiselect('destroy')** **.multiselect('destroy')**
......
index.html
View file @ f765ca73
...@@ -17,26 +17,40 @@ ...@@ -17,26 +17,40 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example1').multiselect(); $('#example1').multiselect();
$('#example2').multiselect(); $('#example2').multiselect();
$('#example3').multiselect({ $('#example3').multiselect({
button: 'btn btn-link' buttonClass: 'btn btn-link'
}); });
$('#example4').multiselect({ $('#example4').multiselect({
button: 'btn btn-small' buttonClass: 'btn btn-small'
}); });
$('#example5').multiselect({ $('#example5').multiselect({
button: 'btn btn-primary disabled' buttonClass: 'btn btn-primary disabled'
}); });
$('#example6').multiselect(); $('#example6').multiselect();
$('.example7').multiselect({ $('.example7').multiselect({
container: '<span class="dropdown" />', buttonContainer: '<span class="dropdown" />',
}); });
$('#example9').multiselect({ $('#example9').multiselect({
onchange:function(element, checked){ onChange:function(element, checked){
alert('Change event invoked!'); alert('Change event invoked!');
console.log(element); console.log(element);
} }
}); });
for (var i = 1; i <= 100; i++) {
$('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
}
$('#example11').multiselect({
maxHeight: 200,
})
}); });
</script> </script>
<div class="container"> <div class="container">
...@@ -46,6 +60,9 @@ ...@@ -46,6 +60,9 @@
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. 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> </p>
</div> </div>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
<div class="page-header"> <div class="page-header">
<h1>Examples</h1> <h1>Examples</h1>
</div> </div>
...@@ -95,7 +112,7 @@ ...@@ -95,7 +112,7 @@
</select> </select>
</td> </td>
<td> <td>
As link using <code>button: 'btn btn-link'</code>. As link using <code>buttonClass: &apos;btn btn-link&apos;</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -110,7 +127,7 @@ ...@@ -110,7 +127,7 @@
</select> </select>
</td> </td>
<td> <td>
Small button using <code>button: 'btn btn-small'</code>. Small button using <code>buttonClass: &apos;btn btn-small&apos;</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -125,7 +142,7 @@ ...@@ -125,7 +142,7 @@
</select> </select>
</td> </td>
<td> <td>
Disabled using <code>button: 'btn btn-primary disabled'</code>. Disabled using <code>buttonClass: &apos;btn btn-primary disabled&apos;</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -145,7 +162,7 @@ ...@@ -145,7 +162,7 @@
</div> </div>
</td> </td>
<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>. Multiple select within a group with add-ons and default container for the plugin: <code>buttonContainer: &apos;&lt;div class="btn-group" /&gt;&apos;</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -168,7 +185,7 @@ ...@@ -168,7 +185,7 @@
</div> </div>
</td> </td>
<td> <td>
Multiple selects within a group using <code>container: '&lt;span class="dropdown" /&gt;'</code>. Multiple selects within a group using <code>buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -183,7 +200,17 @@ ...@@ -183,7 +200,17 @@
</select> </select>
</td> </td>
<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. 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> </td>
</tr> </tr>
</table> </table>
...@@ -193,24 +220,25 @@ ...@@ -193,24 +220,25 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example8').multiselect({ $('#example8').multiselect({
container: '<span />', buttonContainer: '<span />',
}); });
$('#example8-destroy').on('click', function() { $('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy'); $('#example8').multiselect('destroy');
}); });
$('#example10').multiselect({ $('#example10').multiselect({
container: '<span />', buttonContainer: '<span />',
}); });
$('#example10-select').on('click', function() { $('#example10-select').on('click', function() {
$('option[value="tomatoes"]', $('#example10')).attr('selected', true); $('option[value="tomatoes"]', $('#example10')).prop('selected', 'selected');
$('option[value="mushrooms"]', $('#example10')).attr('selected', true); $('option[value="mushrooms"]', $('#example10')).prop('selected', 'selected');
$('option[value="onions"]', $('#example10')).attr('selected', true); $('option[value="onions"]', $('#example10')).prop('selected', 'selected');
alert('Selected Tomatoes, Mushrooms and Onions.'); alert('Selected Tomatoes, Mushrooms and Onions.');
}); });
$('#example10-deselect').on('click', function() { $('#example10-deselect').on('click', function() {
$('option', $('#example10')).each(function(element) { $('option', $('#example10')).each(function(element) {
$(this).attr('selected', false); $(this).removeAttr('selected');
}) });
}); });
$('#example10-refresh').on('click', function() { $('#example10-refresh').on('click', function() {
$('#example10').multiselect('refresh'); $('#example10').multiselect('refresh');
...@@ -278,21 +306,21 @@ ...@@ -278,21 +306,21 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn&apos;, buttonClass: &apos;btn&apos;,
&apos;width&apos;: &apos;auto&apos;, buttonWidth: &apos;auto&apos;,
&apos;text&apos;: function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return &apos;None selected&apos;; return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
else if (options.length > 3) { else if (options.length > 3) {
return options.length + &apos; selected&apos;; return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
else { else {
var selected = &apos;&apos;; var selected = &apos;&apos;;
options.each(function() { options.each(function() {
selected += $(this).text() + &apos;, &apos;; selected += $(this).text() + &apos;, &apos;;
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
} }
}); });
...@@ -335,26 +363,26 @@ ...@@ -335,26 +363,26 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>text</code></td> <td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument.</td> <td>A function returning the string displayed if options are selected. All currently selected options are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td> <td>
<pre> <pre>
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;text&apos;: function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return &apos;None selected&apos;; return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
else if (options.length > 3) { else if (options.length > 3) {
return options.length + &apos; selected&apos;; return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
else { else {
var selected = &apos;&apos;; var selected = &apos;&apos;;
options.each(function() { options.each(function() {
selected += $(this).text() + &apos;, &apos;; selected += $(this).text() + &apos;, &apos;;
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
} }
} }
}); });
...@@ -364,14 +392,14 @@ ...@@ -364,14 +392,14 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>button</code></td> <td><code>buttonClass</code></td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td> <td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td> <td>
<pre> <pre>
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn-primary btn-large&apos;, buttonClass: &apos;btn-primary btn-large&apos;,
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -379,7 +407,7 @@ ...@@ -379,7 +407,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>width</code></td> <td><code>buttonWidth</code></td>
<td> <td>
The width of the dropdown button. Default: <code>auto</code>. The width of the dropdown button. Default: <code>auto</code>.
Allowed formats: Allowed formats:
...@@ -394,7 +422,7 @@ ...@@ -394,7 +422,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;width&apos;: &apos;300px&apos;, buttonWidth: &apos;300px&apos;,
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -402,7 +430,7 @@ ...@@ -402,7 +430,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>container</code></td> <td><code>buttonContainer</code></td>
<td> <td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>. The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td> </td>
...@@ -411,7 +439,7 @@ ...@@ -411,7 +439,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;container&apos;: &apos;&lt;span class="dropdown" /&gt;&apos;, buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;,
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -419,20 +447,37 @@ ...@@ -419,20 +447,37 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>onchange</code></td> <td><code>onChange</code></td>
<td> <td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>. This event handler is triggered when the selected options are changed.
</td> </td>
<td> <td>
<pre> <pre>
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
&apos;onchange&apos;: function(element, checked) { onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;); alert(&apos;Change event invoked!&apos;);
}, },
}); });
}); });
&lt;/script&gt;
</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>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
maxHeight: 400,
});
});
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
......
js/bootstrap-multiselect.js
View file @ f765ca73
...@@ -24,10 +24,19 @@ ...@@ -24,10 +24,19 @@
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.select = $(select); this.select = $(select);
this.container = $(this.options.container) this.container = $(this.options.buttonContainer)
.append('<button type="button" style="width:' + this.options.width + '" class="dropdown-toggle ' + this.options.button + '" data-toggle="dropdown">' + this.options.text($('option:selected', select)) + ' <b class="caret"></b></button>') .append('<button type="button" style="width:' + this.options.buttonWidth + '" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>'); .append('<ul class="dropdown-menu"></ul>');
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden',
});
}
// Manually add the multiple attribute, if its not already set. // Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) { if (!this.select.attr('multiple')) {
this.select.attr('multiple', true); this.select.attr('multiple', true);
...@@ -36,12 +45,13 @@ ...@@ -36,12 +45,13 @@
// Build the dropdown. // Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) { $('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$(element).attr('selected', true); $(element).attr('selected', 'selected');
$(element).prop('selected', 'selected');
} }
$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding: 3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>'); $('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).attr('selected') || false; var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.prop('checked', selected); checkbox.prop('checked', selected);
...@@ -66,12 +76,19 @@ ...@@ -66,12 +76,19 @@
} }
var option = $('option[value="' + $(event.target).val() + '"]', this.select); var option = $('option[value="' + $(event.target).val() + '"]', this.select);
option.attr('selected', checked);
if (checked) {
option.attr('selected', 'selected');
option.prop('selected', 'selected');
}
else {
option.removeAttr('selected');
}
console.log(option);
var options = $('option:selected', this.select); var options = $('option:selected', this.select);
$('button', this.container).html(this.options.text(options) + ' <b class="caret"></b>'); $('button', this.container).html(this.options.buttonText(options));
this.options.onchange(option, checked); this.options.onChange(option, checked);
}, this)); }, this));
$('ul li a', this.container).on('click', function(event) { $('ul li a', this.container).on('click', function(event) {
...@@ -82,28 +99,34 @@ ...@@ -82,28 +99,34 @@
Multiselect.prototype = { Multiselect.prototype = {
defaults: { defaults: {
button: 'btn',
width: 'auto',
// Default text function will either print 'None selected' in case no option is selected, // Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options. // or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed. // If more than 3 options are selected, the number of selected options is printed.
text: function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected'; return 'None selected <b class="caret"></b>';
} }
else if (options.length > 3) { else if (options.length > 3) {
return options.length + ' selected'; return options.length + ' selected <b class="caret"></b>';
} }
else { else {
var selected = ''; var selected = '';
options.each(function() { options.each(function() {
selected += $(this).text() + ', '; selected += $(this).text() + ', ';
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
} }
}, },
container: '<div class="btn-group" />', // Is triggered on change of the selected options.
onchange:function(){} onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400,
}, },
constructor: Multiselect, constructor: Multiselect,
...@@ -131,7 +154,7 @@ ...@@ -131,7 +154,7 @@
} }
}, this)); }, this));
$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>'); $('button', this.container).html(this.options.buttonText($('option:selected', this.select)));
}, },
// Get options by merging defaults and given options. // Get options by merging defaults and given 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