Skip to content

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

#361.

parent 7508a430
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 53 deletions
index.html
View file @ 5991dd34
...@@ -238,6 +238,14 @@ $(document).ready(function() { ...@@ -238,6 +238,14 @@ $(document).ready(function() {
$('option[value="cheese"]', $('#example51')).remove(); $('option[value="cheese"]', $('#example51')).remove();
$('option[value="tomato"]', $('#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> </script>
...@@ -275,6 +283,25 @@ $(document).ready(function() { ...@@ -275,6 +283,25 @@ $(document).ready(function() {
Single selection without having the browser select the first option. Single selection without having the browser select the first option.
</td> </td>
</tr> </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> <tr>
<td> <td>
<select id="example2" multiple="multiple"> <select id="example2" multiple="multiple">
......
js/bootstrap-multiselect.js
View file @ 5991dd34
/** /**
* bootstrap-multiselect.js * Bootstrap Multiselect v0.9.8 (https://github.com/davidstutz/bootstrap-multiselect)
* https://github.com/davidstutz/bootstrap-multiselect *
*
* Copyright 2012 - 2014 David Stutz * Copyright 2012 - 2014 David Stutz
* *
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0. * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*/ */
!function($) { !function($) {
...@@ -15,14 +14,16 @@ ...@@ -15,14 +14,16 @@
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var listOfSelectedItems = allBindingsAccessor().selectedOptions, var listOfSelectedItems = allBindingsAccessor().selectedOptions;
config = ko.utils.unwrapObservable(valueAccessor()); var config = ko.utils.unwrapObservable(valueAccessor());
$(element).multiselect(config); $(element).multiselect(config);
if (isObservableArray(listOfSelectedItems)) { if (isObservableArray(listOfSelectedItems)) {
//set the initial selection state on the multi-select list
// Set the initial selection state on the multiselect list.
$(element).multiselect('select', ko.utils.unwrapObservable(listOfSelectedItems)); $(element).multiselect('select', ko.utils.unwrapObservable(listOfSelectedItems));
// Subscribe to the selectedOptions: ko.observableArray // Subscribe to the selectedOptions: ko.observableArray
listOfSelectedItems.subscribe(function (changes) { listOfSelectedItems.subscribe(function (changes) {
var addedArray = [], deletedArray = []; var addedArray = [], deletedArray = [];
...@@ -36,12 +37,14 @@ ...@@ -36,12 +37,14 @@
break; break;
} }
}); });
if (addedArray.length > 0) { if (addedArray.length > 0) {
$(element).multiselect('select', addedArray); $(element).multiselect('select', addedArray);
}; }
if (deletedArray.length > 0) { if (deletedArray.length > 0) {
$(element).multiselect('deselect', deletedArray); $(element).multiselect('deselect', deletedArray);
}; }
}, null, "arrayChange"); }, null, "arrayChange");
} }
}, },
...@@ -74,8 +77,7 @@ ...@@ -74,8 +77,7 @@
} }
function forEach(array, callback) { function forEach(array, callback) {
var index; for (var index = 0; index < array.length; ++index) {
for (index = 0; index < array.length; ++index) {
callback(array[index]); callback(array[index]);
} }
} }
...@@ -128,7 +130,8 @@ ...@@ -128,7 +130,8 @@
defaults: { defaults: {
/** /**
* Default text function will either print 'None selected' in case no * 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. * option is selected or a list of the selected options up to a length
* of 3 selected options.
* *
* @param {jQuery} options * @param {jQuery} options
* @param {jQuery} select * @param {jQuery} select
...@@ -155,6 +158,7 @@ ...@@ -155,6 +158,7 @@
}, },
/** /**
* Updates the title of the button similar to the buttonText function. * Updates the title of the button similar to the buttonText function.
*
* @param {jQuery} options * @param {jQuery} options
* @param {jQuery} select * @param {jQuery} select
* @returns {@exp;selected@call;substr} * @returns {@exp;selected@call;substr}
...@@ -182,6 +186,7 @@ ...@@ -182,6 +186,7 @@
}, },
/** /**
* Triggered on change of the multiselect. * Triggered on change of the multiselect.
*
* Not triggered when selecting/deselecting options manually. * Not triggered when selecting/deselecting options manually.
* *
* @param {jQuery} option * @param {jQuery} option
...@@ -328,6 +333,7 @@ ...@@ -328,6 +333,7 @@
/** /**
* Build the dropdown options and binds all nessecary events. * Build the dropdown options and binds all nessecary events.
*
* Uses createDivider and createOptionValue to create the necessary options. * Uses createDivider and createOptionValue to create the necessary options.
*/ */
buildDropdownOptions: function() { buildDropdownOptions: function() {
...@@ -338,7 +344,7 @@ ...@@ -338,7 +344,7 @@
var tag = $(element).prop('tagName') var tag = $(element).prop('tagName')
.toLowerCase(); .toLowerCase();
if ($(element).prop('value') == this.options.selectAllValue) { if ($(element).prop('value') === this.options.selectAllValue) {
return; return;
} }
...@@ -387,10 +393,10 @@ ...@@ -387,10 +393,10 @@
if (isSelectAllOption) { if (isSelectAllOption) {
if (checked) { if (checked) {
this.selectall(); this.selectAll();
} }
else { else {
this.deselectall(); this.deselectAll();
} }
} }
...@@ -609,6 +615,7 @@ ...@@ -609,6 +615,7 @@
/** /**
* Build the selct all. * Build the selct all.
*
* Checks if a select all has already been created. * Checks if a select all has already been created.
*/ */
buildSelectAll: function() { buildSelectAll: function() {
...@@ -683,8 +690,8 @@ ...@@ -683,8 +690,8 @@
} }
if (value !== this.options.selectAllValue && text) { if (value !== this.options.selectAllValue && text) {
// by default lets assume that element is not // By default lets assume that element is not
// interesting for this search // interesting for this search.
var showElement = false; var showElement = false;
if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) { if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) {
...@@ -766,7 +773,11 @@ ...@@ -766,7 +773,11 @@
/** /**
* Select all options of the given values. * Select all options of the given values.
* *
* If triggerOnChange is set to true, the on change event is triggered if
* and only if one value is passed.
*
* @param {Array} selectValues * @param {Array} selectValues
* @param {Boolean} triggerOnChange
*/ */
select: function(selectValues, triggerOnChange) { select: function(selectValues, triggerOnChange) {
if(!$.isArray(selectValues)) { if(!$.isArray(selectValues)) {
...@@ -779,11 +790,14 @@ ...@@ -779,11 +790,14 @@
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0)) if($option === undefined || $checkbox === undefined) {
{
continue; continue;
} }
if (!this.options.multiple) {
this.deselectAll(false);
}
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.parents('li') $checkbox.parents('li')
.addClass(this.options.selectedClass); .addClass(this.options.selectedClass);
...@@ -795,17 +809,16 @@ ...@@ -795,17 +809,16 @@
this.updateButtonText(); this.updateButtonText();
if (triggerOnChange && selectValues.length == 1) { if (triggerOnChange && selectValues.length === 1) {
this.options.onChange($option, true); this.options.onChange($option, true);
} }
}, },
/** /**
* Clears all selected items * Clears all selected items.
*
*/ */
clearSelection: function () { clearSelection: function () {
this.deselectall(false); this.deselectAll(false);
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
}, },
...@@ -813,7 +826,11 @@ ...@@ -813,7 +826,11 @@
/** /**
* Deselects all options of the given values. * Deselects all options of the given values.
* *
* If triggerOnChange is set to true, the on change event is triggered, if
* and only if one value is passed.
*
* @param {Array} deselectValues * @param {Array} deselectValues
* @param {Boolean} triggerOnChange
*/ */
deselect: function(deselectValues, triggerOnChange) { deselect: function(deselectValues, triggerOnChange) {
if(!$.isArray(deselectValues)) { if(!$.isArray(deselectValues)) {
...@@ -827,8 +844,7 @@ ...@@ -827,8 +844,7 @@
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0)) if($option === undefined || $checkbox === undefined) {
{
continue; continue;
} }
...@@ -843,20 +859,19 @@ ...@@ -843,20 +859,19 @@
this.updateButtonText(); this.updateButtonText();
if (triggerOnChange && deselectValues.length == 1) { if (triggerOnChange && deselectValues.length === 1) {
this.options.onChange($option, false); this.options.onChange($option, false);
} }
}, },
/** /**
* Selects all enabled & visible options. * Selects all enabled & visible options.
*
*/ */
selectall: function () { selectAll: function () {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul), var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
visibleCheckboxes = allCheckboxes.filter(":visible"), var visibleCheckboxes = allCheckboxes.filter(":visible");
allCheckboxesCount = allCheckboxes.length, var allCheckboxesCount = allCheckboxes.length;
visibleCheckboxesCount = visibleCheckboxes.length; var visibleCheckboxesCount = visibleCheckboxes.length;
visibleCheckboxes.prop('checked', true); visibleCheckboxes.prop('checked', true);
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
...@@ -865,35 +880,44 @@ ...@@ -865,35 +880,44 @@
$("option:enabled", this.$select).prop('selected', true); $("option:enabled", this.$select).prop('selected', true);
} }
else { else {
var values = visibleCheckboxes.map(function() { return $(this).val() }).get(); var values = visibleCheckboxes.map(function() {
$("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', true); return $(this).val();
}).get();
$("option:enabled", this.$select).filter(function(index) {
return $.inArray($(this).val(), values) !== -1;
}).prop('selected', true);
} }
}, },
/** /**
* Deselects all options. * Deselects all options.
*
* If justVisible is true or not specified, only visible options are deselected. * If justVisible is true or not specified, only visible options are deselected.
* *
* @param {Boolean} justVisible * @param {Boolean} justVisible
*/ */
deselectall: function (justVisible) { deselectAll: function (justVisible) {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul), var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
justVisible = typeof justVisible === 'undefined' ? true : justVisible,
visibleCheckboxes = void(0);
if(justVisible) { if(justVisible) {
var values = void(0); var visibleCheckboxes = allCheckboxes.filter(":visible");
visibleCheckboxes = allCheckboxes.filter(":visible");
visibleCheckboxes.prop('checked', false); visibleCheckboxes.prop('checked', false);
values = visibleCheckboxes.map(function() { return $(this).val() }).get(); var values = visibleCheckboxes.map(function() {
return $(this).val();
}).get();
$("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', false); $("option:enabled", this.$select).filter(function(index) {
return $.inArray($(this).val(), values) !== -1;
}).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
}
}else { else {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
allCheckboxes.prop('checked', false); allCheckboxes.prop('checked', false);
$("option:enabled", this.$select).prop('selected', false); $("option:enabled", this.$select).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
} }
...@@ -901,6 +925,7 @@ ...@@ -901,6 +925,7 @@
/** /**
* Rebuild the plugin. * Rebuild the plugin.
*
* Rebuilds the dropdown, the filter and the select all option. * Rebuilds the dropdown, the filter and the select all option.
*/ */
rebuild: function() { rebuild: function() {
...@@ -1017,11 +1042,11 @@ ...@@ -1017,11 +1042,11 @@
*/ */
updateSelectAll: function() { updateSelectAll: function() {
if (this.hasSelectAll()) { if (this.hasSelectAll()) {
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul), var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
allBoxesLength = allBoxes.length, var allBoxesLength = allBoxes.length;
checkedBoxesLength = allBoxes.filter(":checked").length, var checkedBoxesLength = allBoxes.filter(":checked").length;
selectAllLi = $("li." + this.options.selectAllValue, this.$ul), var selectAllLi = $("li." + this.options.selectAllValue, this.$ul);
selectAllInput = selectAllLi.find("input"); var selectAllInput = selectAllLi.find("input");
if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) { if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
selectAllInput.prop("checked", true); selectAllInput.prop("checked", true);
...@@ -1045,7 +1070,6 @@ ...@@ -1045,7 +1070,6 @@
// Now update the title attribute of the button. // Now update the title attribute of the button.
$('button.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select)); $('button.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
}, },
/** /**
......
less/bootstrap-multiselect.less
View file @ 5991dd34
/** /**
* bootstrap-multiselect.less * Bootstrap Multiselect v0.9.8 (https://github.com/davidstutz/bootstrap-multiselect)
* https://github.com/davidstutz/bootstrap-multiselect
* *
* Copyright 2012 - 2014 David Stutz * Copyright 2012 - 2014 David Stutz
* *
......
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