Skip to content

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

Merge pull request #57 from luisrudge/master 

Added '[x] Select all' option.
parents 8d99a6d9 806288b1
Show whitespace changes
Inline Side-by-side
Showing with 48 additions and 19 deletions
README.md
View file @ a7eeb1e9
...@@ -192,6 +192,10 @@ The used container holding both the dropdown button and the dropdown menu. ...@@ -192,6 +192,10 @@ The used container holding both the dropdown button and the dropdown menu.
Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false. Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false.
**includeSelectAllOption**
Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false.
**onChange** **onChange**
Assign an event handler to the change event: Assign an event handler to the change event:
......
index.html
View file @ a7eeb1e9
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Bootstrap Multiselect</title> <title>Bootstrap Multiselect</title>
...@@ -103,7 +103,9 @@ ...@@ -103,7 +103,9 @@
$('#example24').multiselect(); $('#example24').multiselect();
$('#example25').multiselect({dropRight: true}); $('#example25').multiselect({ dropRight: true });
$('#example27').multiselect({ includeSelectAllOption: true });
}); });
</script> </script>
<p> <p>
...@@ -140,6 +142,21 @@ ...@@ -140,6 +142,21 @@
Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code> Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
</td> </td>
</tr> </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> <tr>
<td> <td>
<select id="example3" multiple="multiple"> <select id="example3" multiple="multiple">
......
js/bootstrap-multiselect.js
View file @ a7eeb1e9
...@@ -117,10 +117,15 @@ ...@@ -117,10 +117,15 @@
// Maximum height of the dropdown menu. // Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false, maxHeight: false,
includeSelectAllOption: false
}, },
constructor: Multiselect, constructor: Multiselect,
// Add the [] Select all option
createSelectAllOption: function () {
$(this.$select).html('<option value="select-all-option"> Select all</option>' + this.$select.html());
},
// Will build an dropdown element for the given option. // Will build an dropdown element for the given option.
createOptionValue: function(element) { createOptionValue: function(element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
...@@ -155,6 +160,10 @@ ...@@ -155,6 +160,10 @@
// Build the dropdown and bind event handling. // Build the dropdown and bind event handling.
buildDropdown: function () { buildDropdown: function () {
//If options.includeSelectAllOption === true, add the include all checkbox
if (this.options.includeSelectAllOption && this.options.multiple) {
this.createSelectAllOption();
}
this.$select.children().each($.proxy(function (index, element) { this.$select.children().each($.proxy(function (index, element) {
// Support optgroups and options without a group simultaneously. // Support optgroups and options without a group simultaneously.
var tag = $(element).prop('tagName').toLowerCase(); var tag = $(element).prop('tagName').toLowerCase();
...@@ -184,7 +193,7 @@ ...@@ -184,7 +193,7 @@
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('ul li input', this.$container).on('change', $.proxy(function(event) { $('ul li input', this.$container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false; var checked = $(event.target).prop('checked') || false;
var isSelectAllOption = $(event.target).val() == 'select-all-option';
if (this.options.selectedClass) { if (this.options.selectedClass) {
if (checked) { if (checked) {
$(event.target).parents('li').addClass(this.options.selectedClass); $(event.target).parents('li').addClass(this.options.selectedClass);
...@@ -194,17 +203,16 @@ ...@@ -194,17 +203,16 @@
} }
} }
var option = $('option', this.$select).filter(function () { return $(this).val() == $(event.target).val(); }) var option = $('option', this.$select).filter(function() { return $(this).val() == $(event.target).val(); });
var $optionsNotThis = $('option', this.$select).not($(option));
var $checkboxesNotThis = $('input', this.$container).not($(event.target));
if (isSelectAllOption) {
$checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).trigger('click');
}
if (checked) { if (checked) {
option.attr('selected', 'selected'); option.attr('selected', 'selected');
option.prop('selected', 'selected'); option.prop('selected', 'selected');
var $optionsNotThis = $('option', this.$select).not($(option));
if (!this.options.multiple) { if (!this.options.multiple) {
var $checkboxesNotThis = $('input', this.$container).not($(event.target));
if (this.options.selectedClass) { if (this.options.selectedClass) {
$($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass); $($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass);
} }
...@@ -374,11 +382,11 @@ ...@@ -374,11 +382,11 @@
if (navigator.appName == 'Microsoft Internet Explorer') { if (navigator.appName == 'Microsoft Internet Explorer') {
var regex = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); var regex = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (regex.exec(navigator.userAgent) != null) { if (regex.exec(navigator.userAgent) != null) {
return $('option:selected', this.$select); return $('option:selected[value!="select-all-option"]', this.$select);
} }
} }
return $('option[selected]', this.$select); return $('option[selected][value!="select-all-option"]', this.$select);
} }
}; };
......
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