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
Hide 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>
...@@ -125,19 +127,34 @@ ...@@ -125,19 +127,34 @@
Normal select. The plugin will do single selection using radio buttons rather than multiple selection using checkboxes. Normal select. The plugin will do single selection using radio buttons rather than multiple selection using checkboxes.
</td> </td>
</tr> </tr>
<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> <td>
<select id="example2" multiple="multiple"> <select id="example27" multiple="multiple">
<option value="cheese" selected>Cheese</option> <option value="cheese">Cheese</option>
<option value="tomatoes" selected>Tomatoes</option> <option value="tomatoes">Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option> <option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</td> </td>
<td> <td>
Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code> Multiselect with a 'Select all' option
</td> </td>
</tr> </tr>
<tr> <tr>
......
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,23 +203,22 @@ ...@@ -194,23 +203,22 @@
} }
} }
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);
} }
$($checkboxesNotThis).prop('checked', false); $($checkboxesNotThis).prop('checked', false);
$optionsNotThis.removeAttr('selected').removeProp('selected'); $optionsNotThis.removeAttr('selected').removeProp('selected');
// It's a single selection, so close. // It's a single selection, so close.
...@@ -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