Skip to content

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

Example for... 

Example for http://stackoverflow.com/questions/36892089/how-can-i-make-bootstrap-multiselect-optgroups-collapse-by-default.
parent 07812b5a
Hide whitespace changes
Inline Side-by-side
Showing with 407 additions and 362 deletions
dist/js/bootstrap-multiselect.js
View file @ 06549a01
/** /**
* Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect) * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)
* *
* Apache License, Version 2.0: * Apache License, Version 2.0:
* Copyright (c) 2012 - 2015 David Stutz * Copyright (c) 2012 - 2015 David Stutz
* *
* Licensed under the Apache License, Version 2.0 (the "License"); you may not * 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 * 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 * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations * License for the specific language governing permissions and limitations
* under the License. * under the License.
* *
* BSD 3-Clause License: * BSD 3-Clause License:
* Copyright (c) 2012 - 2015 David Stutz * Copyright (c) 2012 - 2015 David Stutz
* All rights reserved. * All rights reserved.
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met: * modification, are permitted provided that the following conditions are met:
* - Redistributions of source code must retain the above copyright notice, * - Redistributions of source code must retain the above copyright notice,
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
* - Neither the name of David Stutz nor the names of its contributors may be * - Neither the name of David Stutz nor the names of its contributors may be
* used to endorse or promote products derived from this software without * used to endorse or promote products derived from this software without
* specific prior written permission. * specific prior written permission.
* *
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
...@@ -175,12 +175,12 @@ ...@@ -175,12 +175,12 @@
function Multiselect(select, options) { function Multiselect(select, options) {
this.$select = $(select); this.$select = $(select);
// Placeholder via data attributes // Placeholder via data attributes
if (this.$select.attr("data-placeholder")) { if (this.$select.attr("data-placeholder")) {
options.nonSelectedText = this.$select.data("placeholder"); options.nonSelectedText = this.$select.data("placeholder");
} }
this.options = this.mergeOptions($.extend({}, options, this.$select.data())); this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
// Initialization. // Initialization.
...@@ -199,7 +199,7 @@ ...@@ -199,7 +199,7 @@
this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this); this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this); this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
this.options.onInitialized = $.proxy(this.options.onInitialized, this); this.options.onInitialized = $.proxy(this.options.onInitialized, this);
// Build select all if enabled. // Build select all if enabled.
this.buildContainer(); this.buildContainer();
this.buildButton(); this.buildButton();
...@@ -210,11 +210,11 @@ ...@@ -210,11 +210,11 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(true); this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable(); this.disable();
} }
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
* 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 * option is selected or a list of the selected options up to a length
* of 3 selected options. * of 3 selected options.
* *
* @param {jQuery} options * @param {jQuery} options
* @param {jQuery} select * @param {jQuery} select
* @returns {String} * @returns {String}
...@@ -238,15 +238,15 @@ ...@@ -238,15 +238,15 @@
buttonText: function(options, select) { buttonText: function(options, select) {
if (this.disabledText.length > 0 if (this.disabledText.length > 0
&& (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) { && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {
return this.disabledText; return this.disabledText;
} }
else if (options.length === 0) { else if (options.length === 0) {
return this.nonSelectedText; return this.nonSelectedText;
} }
else if (this.allSelectedText else if (this.allSelectedText
&& options.length === $('option', $(select)).length && options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1 && $('option', $(select)).length !== 1
&& this.multiple) { && this.multiple) {
if (this.selectAllNumber) { if (this.selectAllNumber) {
...@@ -262,18 +262,18 @@ ...@@ -262,18 +262,18 @@
else { else {
var selected = ''; var selected = '';
var delimiter = this.delimiterText; var delimiter = this.delimiterText;
options.each(function() { options.each(function() {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter; selected += label + delimiter;
}); });
return selected.substr(0, selected.length - this.delimiterText.length); return selected.substr(0, selected.length - this.delimiterText.length);
} }
}, },
/** /**
* 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}
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
else { else {
var selected = ''; var selected = '';
var delimiter = this.delimiterText; var delimiter = this.delimiterText;
options.each(function () { options.each(function () {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter; selected += label + delimiter;
...@@ -316,9 +316,9 @@ ...@@ -316,9 +316,9 @@
}, },
/** /**
* 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
* @param {Boolean} checked * @param {Boolean} checked
*/ */
...@@ -343,31 +343,31 @@ ...@@ -343,31 +343,31 @@
}, },
/** /**
* Triggered after the dropdown is shown. * Triggered after the dropdown is shown.
* *
* @param {jQuery} event * @param {jQuery} event
*/ */
onDropdownShown: function(event) { onDropdownShown: function(event) {
}, },
/** /**
* Triggered after the dropdown is hidden. * Triggered after the dropdown is hidden.
* *
* @param {jQuery} event * @param {jQuery} event
*/ */
onDropdownHidden: function(event) { onDropdownHidden: function(event) {
}, },
/** /**
* Triggered on select all. * Triggered on select all.
*/ */
onSelectAll: function() { onSelectAll: function() {
}, },
/** /**
* Triggered on deselect all. * Triggered on deselect all.
*/ */
onDeselectAll: function() { onDeselectAll: function() {
}, },
/** /**
* Triggered after initializing. * Triggered after initializing.
...@@ -495,12 +495,12 @@ ...@@ -495,12 +495,12 @@
'overflow-x': 'hidden' 'overflow-x': 'hidden'
}); });
} }
if (this.options.dropUp) { if (this.options.dropUp) {
var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0)); var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0));
var moveCalc = height + 34; var moveCalc = height + 34;
this.$ul.css({ this.$ul.css({
'max-height': height + 'px', 'max-height': height + 'px',
'overflow-y': 'auto', 'overflow-y': 'auto',
...@@ -508,13 +508,13 @@ ...@@ -508,13 +508,13 @@
'margin-top': "-" + moveCalc + 'px' 'margin-top': "-" + moveCalc + 'px'
}); });
} }
this.$container.append(this.$ul); this.$container.append(this.$ul);
}, },
/** /**
* Build the dropdown options and binds all necessary events. * Build the dropdown options and binds all necessary events.
* *
* Uses createDivider and createOptionValue to create the necessary options. * Uses createDivider and createOptionValue to create the necessary options.
*/ */
buildDropdownOptions: function() { buildDropdownOptions: function() {
...@@ -525,7 +525,7 @@ ...@@ -525,7 +525,7 @@
// Support optgroups and options without a group simultaneously. // Support optgroups and options without a group simultaneously.
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;
} }
...@@ -574,7 +574,7 @@ ...@@ -574,7 +574,7 @@
var $checkboxesNotThis = $('input', this.$container).not($target); var $checkboxesNotThis = $('input', this.$container).not($target);
if (isSelectAllOption) { if (isSelectAllOption) {
if (checked) { if (checked) {
this.selectAll(this.options.selectAllJustVisible); this.selectAll(this.options.selectAllJustVisible);
} }
...@@ -611,13 +611,13 @@ ...@@ -611,13 +611,13 @@
// Unselect option. // Unselect option.
$option.prop('selected', false); $option.prop('selected', false);
} }
// To prevent select all from firing onChange: #575 // To prevent select all from firing onChange: #575
this.options.onChange($option, checked); this.options.onChange($option, checked);
// Do not update select all or optgroups on select all change! // Do not update select all or optgroups on select all change!
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
...@@ -625,7 +625,7 @@ ...@@ -625,7 +625,7 @@
this.$select.change(); this.$select.change();
this.updateButtonText(); this.updateButtonText();
if(this.options.preventInputChangeEvent) { if(this.options.preventInputChangeEvent) {
return false; return false;
} }
...@@ -637,12 +637,12 @@ ...@@ -637,12 +637,12 @@
return false; return false;
} }
}); });
$('li a', this.$ul).on('touchstart click', $.proxy(function(event) { $('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
event.stopPropagation(); event.stopPropagation();
var $target = $(event.target); var $target = $(event.target);
if (event.shiftKey && this.options.multiple) { if (event.shiftKey && this.options.multiple) {
if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431) if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
event.preventDefault(); event.preventDefault();
...@@ -654,39 +654,39 @@ ...@@ -654,39 +654,39 @@
if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
var from = $target.closest("li").index(); var from = $target.closest("li").index();
var to = this.lastToggledInput.closest("li").index(); var to = this.lastToggledInput.closest("li").index();
if (from > to) { // Swap the indices if (from > to) { // Swap the indices
var tmp = to; var tmp = to;
to = from; to = from;
from = tmp; from = tmp;
} }
// Make sure we grab all elements since slice excludes the last index // Make sure we grab all elements since slice excludes the last index
++to; ++to;
// Change the checkboxes and underlying options // Change the checkboxes and underlying options
var range = this.$ul.find("li").slice(from, to).find("input"); var range = this.$ul.find("li").slice(from, to).find("input");
range.prop('checked', checked); range.prop('checked', checked);
if (this.options.selectedClass) { if (this.options.selectedClass) {
range.closest('li') range.closest('li')
.toggleClass(this.options.selectedClass, checked); .toggleClass(this.options.selectedClass, checked);
} }
for (var i = 0, j = range.length; i < j; i++) { for (var i = 0, j = range.length; i < j; i++) {
var $checkbox = $(range[i]); var $checkbox = $(range[i]);
var $option = this.getOptionByValue($checkbox.val()); var $option = this.getOptionByValue($checkbox.val());
$option.prop('selected', checked); $option.prop('selected', checked);
} }
} }
// Trigger the select "change" event // Trigger the select "change" event
$target.trigger("change"); $target.trigger("change");
} }
// Remembers last clicked option // Remembers last clicked option
if($target.is("input") && !$target.closest("li").is(".multiselect-item")){ if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
this.lastToggledInput = $target; this.lastToggledInput = $target;
...@@ -739,66 +739,66 @@ ...@@ -739,66 +739,66 @@
event.preventDefault(); event.preventDefault();
} }
}, this)); }, this));
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
$("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) { $("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {
event.stopPropagation(); event.stopPropagation();
var $target = $(event.target); var $target = $(event.target);
var checked = $target.prop('checked') || false; var checked = $target.prop('checked') || false;
var $li = $(event.target).closest('li'); var $li = $(event.target).closest('li');
var $group = $li.nextUntil("li.multiselect-group") var $group = $li.nextUntil("li.multiselect-group")
.not('.multiselect-filter-hidden') .not('.multiselect-filter-hidden')
.not('.disabled'); .not('.disabled');
var $inputs = $group.find("input"); var $inputs = $group.find("input");
var values = []; var values = [];
var $options = []; var $options = [];
$.each($inputs, $.proxy(function(index, input) { $.each($inputs, $.proxy(function(index, input) {
var value = $(input).val(); var value = $(input).val();
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
if (checked) { if (checked) {
$(input).prop('checked', true); $(input).prop('checked', true);
$(input).closest('li') $(input).closest('li')
.addClass(this.options.selectedClass); .addClass(this.options.selectedClass);
$option.prop('selected', true); $option.prop('selected', true);
} }
else { else {
$(input).prop('checked', false); $(input).prop('checked', false);
$(input).closest('li') $(input).closest('li')
.removeClass(this.options.selectedClass); .removeClass(this.options.selectedClass);
$option.prop('selected', false); $option.prop('selected', false);
} }
$options.push(this.getOptionByValue(value)); $options.push(this.getOptionByValue(value));
}, this)) }, this))
// Cannot use select or deselect here because it would call updateOptGroups again. // Cannot use select or deselect here because it would call updateOptGroups again.
this.options.onChange($options, checked); this.options.onChange($options, checked);
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
}, this)); }, this));
} }
if (this.options.enableCollapsibleOptGroups && this.options.multiple) { if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) { $("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
var $li = $(event.target).closest('li'); var $li = $(event.target).closest('li');
var $inputs = $li.nextUntil("li.multiselect-group") var $inputs = $li.nextUntil("li.multiselect-group")
.not('.multiselect-filter-hidden'); .not('.multiselect-filter-hidden');
var visible = true; var visible = true;
$inputs.each(function() { $inputs.each(function() {
visible = visible && $(this).is(':visible'); visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
}); });
if (visible) { if (visible) {
$inputs.hide() $inputs.hide()
.addClass('multiselect-collapsible-hidden'); .addClass('multiselect-collapsible-hidden');
...@@ -808,7 +808,7 @@ ...@@ -808,7 +808,7 @@
.removeClass('multiselect-collapsible-hidden'); .removeClass('multiselect-collapsible-hidden');
} }
}, this)); }, this));
$("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea'); $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
$("li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px'); $("li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
$("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px'); $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
...@@ -843,14 +843,14 @@ ...@@ -843,14 +843,14 @@
else { else {
$label.text(" " + label); $label.text(" " + label);
} }
var $checkbox = $('<input/>').attr('type', inputType); var $checkbox = $('<input/>').attr('type', inputType);
var name = this.options.checkboxName($element); var name = this.options.checkboxName($element);
if (name) { if (name) {
$checkbox.attr('name', name); $checkbox.attr('name', name);
} }
$label.prepend($checkbox); $label.prepend($checkbox);
var selected = $element.prop('selected') || false; var selected = $element.prop('selected') || false;
...@@ -898,35 +898,35 @@ ...@@ -898,35 +898,35 @@
* *
* @param {jQuery} group * @param {jQuery} group
*/ */
createOptgroup: function(group) { createOptgroup: function(group) {
var label = $(group).attr("label"); var label = $(group).attr("label");
var value = $(group).attr("value"); var value = $(group).attr("value");
var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>'); var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>');
var classes = this.options.optionClass(group); var classes = this.options.optionClass(group);
$li.addClass(classes); $li.addClass(classes);
if (this.options.enableHTML) { if (this.options.enableHTML) {
$('label b', $li).html(" " + label); $('label b', $li).html(" " + label);
} }
else { else {
$('label b', $li).text(" " + label); $('label b', $li).text(" " + label);
} }
if (this.options.enableCollapsibleOptGroups && this.options.multiple) { if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$('a', $li).append('<span class="caret-container"><b class="caret"></b></span>'); $('a', $li).append('<span class="caret-container"><b class="caret"></b></span>');
} }
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
$('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>'); $('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
} }
if ($(group).is(':disabled')) { if ($(group).is(':disabled')) {
$li.addClass('disabled'); $li.addClass('disabled');
} }
this.$ul.append($li); this.$ul.append($li);
$("option", group).each($.proxy(function($, group) { $("option", group).each($.proxy(function($, group) {
this.createOptionValue(group); this.createOptionValue(group);
}, this)) }, this))
...@@ -934,14 +934,14 @@ ...@@ -934,14 +934,14 @@
/** /**
* Build the select all. * Build the select all.
* *
* Checks if a select all has already been created. * Checks if a select all has already been created.
*/ */
buildSelectAll: function() { buildSelectAll: function() {
if (typeof this.options.selectAllValue === 'number') { if (typeof this.options.selectAllValue === 'number') {
this.options.selectAllValue = this.options.selectAllValue.toString(); this.options.selectAllValue = this.options.selectAllValue.toString();
} }
var alreadyHasSelectAll = this.hasSelectAll(); var alreadyHasSelectAll = this.hasSelectAll();
if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
...@@ -954,21 +954,21 @@ ...@@ -954,21 +954,21 @@
var $li = $(this.options.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox"); $('label', $li).addClass("checkbox");
if (this.options.enableHTML) { if (this.options.enableHTML) {
$('label', $li).html(" " + this.options.selectAllText); $('label', $li).html(" " + this.options.selectAllText);
} }
else { else {
$('label', $li).text(" " + this.options.selectAllText); $('label', $li).text(" " + this.options.selectAllText);
} }
if (this.options.selectAllName) { if (this.options.selectAllName) {
$('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />'); $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
} }
else { else {
$('label', $li).prepend('<input type="checkbox" />'); $('label', $li).prepend('<input type="checkbox" />');
} }
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
$checkbox.val(this.options.selectAllValue); $checkbox.val(this.options.selectAllValue);
...@@ -995,26 +995,26 @@ ...@@ -995,26 +995,26 @@
this.$filter = $(this.options.templates.filter); this.$filter = $(this.options.templates.filter);
$('input', this.$filter).attr('placeholder', this.options.filterPlaceholder); $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
// Adds optional filter clear button // Adds optional filter clear button
if(this.options.includeFilterClearBtn) { if(this.options.includeFilterClearBtn) {
var clearBtn = $(this.options.templates.filterClearBtn); var clearBtn = $(this.options.templates.filterClearBtn);
clearBtn.on('click', $.proxy(function(event){ clearBtn.on('click', $.proxy(function(event){
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
this.$filter.find('.multiselect-search').val(''); this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass('multiselect-filter-hidden'); $('li', this.$ul).show().removeClass('multiselect-filter-hidden');
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
}, this)); }, this));
this.$filter.find('.input-group').append(clearBtn); this.$filter.find('.input-group').append(clearBtn);
} }
this.$ul.prepend(this.$filter); this.$ul.prepend(this.$filter);
this.$filter.val(this.query).on('click', function(event) { this.$filter.val(this.query).on('click', function(event) {
...@@ -1024,7 +1024,7 @@ ...@@ -1024,7 +1024,7 @@
if (event.which === 13) { if (event.which === 13) {
event.preventDefault(); event.preventDefault();
} }
// This is useful to catch "keydown" events after the browser has updated the control. // This is useful to catch "keydown" events after the browser has updated the control.
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
...@@ -1073,7 +1073,7 @@ ...@@ -1073,7 +1073,7 @@
// Toggle current element (group or group item) according to showElement boolean. // Toggle current element (group or group item) according to showElement boolean.
$(element).toggle(showElement) $(element).toggle(showElement)
.toggleClass('multiselect-filter-hidden', !showElement); .toggleClass('multiselect-filter-hidden', !showElement);
// Differentiate groups and group items. // Differentiate groups and group items.
if ($(element).hasClass('multiselect-group')) { if ($(element).hasClass('multiselect-group')) {
// Remember group status. // Remember group status.
...@@ -1086,7 +1086,7 @@ ...@@ -1086,7 +1086,7 @@
$(currentGroup).show() $(currentGroup).show()
.removeClass('multiselect-filter-hidden'); .removeClass('multiselect-filter-hidden');
} }
// Show all group items when group name satisfies filter. // Show all group items when group name satisfies filter.
if (!showElement && currentGroupVisible) { if (!showElement && currentGroupVisible) {
$(element).show() $(element).show()
...@@ -1098,7 +1098,7 @@ ...@@ -1098,7 +1098,7 @@
} }
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
...@@ -1122,7 +1122,7 @@ ...@@ -1122,7 +1122,7 @@
*/ */
refresh: function () { refresh: function () {
var inputs = $.map($('li input', this.$ul), $); var inputs = $.map($('li input', this.$ul), $);
$('option', this.$select).each($.proxy(function (index, element) { $('option', this.$select).each($.proxy(function (index, element) {
var $elem = $(element); var $elem = $(element);
var value = $elem.val(); var value = $elem.val();
...@@ -1165,7 +1165,7 @@ ...@@ -1165,7 +1165,7 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
...@@ -1173,10 +1173,10 @@ ...@@ -1173,10 +1173,10 @@
/** /**
* 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 * If triggerOnChange is set to true, the on change event is triggered if
* and only if one value is passed. * and only if one value is passed.
* *
* @param {Array} selectValues * @param {Array} selectValues
* @param {Boolean} triggerOnChange * @param {Boolean} triggerOnChange
*/ */
...@@ -1198,11 +1198,11 @@ ...@@ -1198,11 +1198,11 @@
if($option === undefined || $checkbox === undefined) { if($option === undefined || $checkbox === undefined) {
continue; continue;
} }
if (!this.options.multiple) { if (!this.options.multiple) {
this.deselectAll(false); this.deselectAll(false);
} }
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.closest('li') $checkbox.closest('li')
.addClass(this.options.selectedClass); .addClass(this.options.selectedClass);
...@@ -1210,7 +1210,7 @@ ...@@ -1210,7 +1210,7 @@
$checkbox.prop('checked', true); $checkbox.prop('checked', true);
$option.prop('selected', true); $option.prop('selected', true);
if (triggerOnChange) { if (triggerOnChange) {
this.options.onChange($option, true); this.options.onChange($option, true);
} }
...@@ -1218,7 +1218,7 @@ ...@@ -1218,7 +1218,7 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
...@@ -1231,7 +1231,7 @@ ...@@ -1231,7 +1231,7 @@
this.deselectAll(false); this.deselectAll(false);
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
...@@ -1239,10 +1239,10 @@ ...@@ -1239,10 +1239,10 @@
/** /**
* 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 * If triggerOnChange is set to true, the on change event is triggered, if
* and only if one value is passed. * and only if one value is passed.
* *
* @param {Array} deselectValues * @param {Array} deselectValues
* @param {Boolean} triggerOnChange * @param {Boolean} triggerOnChange
*/ */
...@@ -1272,7 +1272,7 @@ ...@@ -1272,7 +1272,7 @@
$checkbox.prop('checked', false); $checkbox.prop('checked', false);
$option.prop('selected', false); $option.prop('selected', false);
if (triggerOnChange) { if (triggerOnChange) {
this.options.onChange($option, false); this.options.onChange($option, false);
} }
...@@ -1280,12 +1280,12 @@ ...@@ -1280,12 +1280,12 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
}, },
/** /**
* Selects all enabled & visible options. * Selects all enabled & visible options.
* *
...@@ -1295,15 +1295,15 @@ ...@@ -1295,15 +1295,15 @@
* @param {Boolean} triggerOnSelectAll * @param {Boolean} triggerOnSelectAll
*/ */
selectAll: function (justVisible, triggerOnSelectAll) { selectAll: function (justVisible, triggerOnSelectAll) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible; var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul); var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible'); var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
if(justVisible) { if(justVisible) {
$('input:enabled' , visibleLis).prop('checked', true); $('input:enabled' , visibleLis).prop('checked', true);
visibleLis.addClass(this.options.selectedClass); visibleLis.addClass(this.options.selectedClass);
$('input:enabled' , visibleLis).each($.proxy(function(index, element) { $('input:enabled' , visibleLis).each($.proxy(function(index, element) {
var value = $(element).val(); var value = $(element).val();
var option = this.getOptionByValue(value); var option = this.getOptionByValue(value);
...@@ -1313,20 +1313,20 @@ ...@@ -1313,20 +1313,20 @@
else { else {
$('input:enabled' , allLis).prop('checked', true); $('input:enabled' , allLis).prop('checked', true);
allLis.addClass(this.options.selectedClass); allLis.addClass(this.options.selectedClass);
$('input:enabled' , allLis).each($.proxy(function(index, element) { $('input:enabled' , allLis).each($.proxy(function(index, element) {
var value = $(element).val(); var value = $(element).val();
var option = this.getOptionByValue(value); var option = this.getOptionByValue(value);
$(option).prop('selected', true); $(option).prop('selected', true);
}, this)); }, this));
} }
$('li input[value="' + this.options.selectAllValue + '"]').prop('checked', true); $('li input[value="' + this.options.selectAllValue + '"]').prop('checked', true);
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
if (triggerOnSelectAll) { if (triggerOnSelectAll) {
this.options.onSelectAll(); this.options.onSelectAll();
} }
...@@ -1334,21 +1334,21 @@ ...@@ -1334,21 +1334,21 @@
/** /**
* 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, triggerOnDeselectAll) { deselectAll: function (justVisible, triggerOnDeselectAll) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible; var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul); var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible'); var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
if(justVisible) { if(justVisible) {
$('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false); $('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false);
visibleLis.removeClass(this.options.selectedClass); visibleLis.removeClass(this.options.selectedClass);
$('input[type="checkbox"]:enabled' , visibleLis).each($.proxy(function(index, element) { $('input[type="checkbox"]:enabled' , visibleLis).each($.proxy(function(index, element) {
var value = $(element).val(); var value = $(element).val();
var option = this.getOptionByValue(value); var option = this.getOptionByValue(value);
...@@ -1358,14 +1358,14 @@ ...@@ -1358,14 +1358,14 @@
else { else {
$('input[type="checkbox"]:enabled' , allLis).prop('checked', false); $('input[type="checkbox"]:enabled' , allLis).prop('checked', false);
allLis.removeClass(this.options.selectedClass); allLis.removeClass(this.options.selectedClass);
$('input[type="checkbox"]:enabled' , allLis).each($.proxy(function(index, element) { $('input[type="checkbox"]:enabled' , allLis).each($.proxy(function(index, element) {
var value = $(element).val(); var value = $(element).val();
var option = this.getOptionByValue(value); var option = this.getOptionByValue(value);
$(option).prop('selected', false); $(option).prop('selected', false);
}, this)); }, this));
} }
$('li input[value="' + this.options.selectAllValue + '"]').prop('checked', false); $('li input[value="' + this.options.selectAllValue + '"]').prop('checked', false);
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
...@@ -1380,7 +1380,7 @@ ...@@ -1380,7 +1380,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() {
...@@ -1395,18 +1395,18 @@ ...@@ -1395,18 +1395,18 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(true); this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups(); this.updateOptGroups();
} }
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable(); this.disable();
} }
else { else {
this.enable(); this.enable();
} }
if (this.options.dropRight) { if (this.options.dropRight) {
this.$ul.addClass('pull-right'); this.$ul.addClass('pull-right');
} }
...@@ -1416,21 +1416,21 @@ ...@@ -1416,21 +1416,21 @@
* The provided data will be used to build the dropdown. * The provided data will be used to build the dropdown.
*/ */
dataprovider: function(dataprovider) { dataprovider: function(dataprovider) {
var groupCounter = 0; var groupCounter = 0;
var $select = this.$select.empty(); var $select = this.$select.empty();
$.each(dataprovider, function (index, option) { $.each(dataprovider, function (index, option) {
var $tag; var $tag;
if ($.isArray(option.children)) { // create optiongroup tag if ($.isArray(option.children)) { // create optiongroup tag
groupCounter++; groupCounter++;
$tag = $('<optgroup/>').attr({ $tag = $('<optgroup/>').attr({
label: option.label || 'Group ' + groupCounter, label: option.label || 'Group ' + groupCounter,
disabled: !!option.disabled disabled: !!option.disabled
}); });
forEach(option.children, function(subOption) { // add children option tags forEach(option.children, function(subOption) { // add children option tags
var attributes = { var attributes = {
value: subOption.value, value: subOption.value,
...@@ -1439,17 +1439,17 @@ ...@@ -1439,17 +1439,17 @@
selected: !!subOption.selected, selected: !!subOption.selected,
disabled: !!subOption.disabled disabled: !!subOption.disabled
}; };
//Loop through attributes object and add key-value for each attribute //Loop through attributes object and add key-value for each attribute
for (var key in subOption.attributes) { for (var key in subOption.attributes) {
attributes['data-' + key] = subOption.attributes[key]; attributes['data-' + key] = subOption.attributes[key];
} }
//Append original attributes + new data attributes to option //Append original attributes + new data attributes to option
$tag.append($('<option/>').attr(attributes)); $tag.append($('<option/>').attr(attributes));
}); });
} }
else { else {
var attributes = { var attributes = {
'value': option.value, 'value': option.value,
'label': option.label || option.value, 'label': option.label || option.value,
...@@ -1458,19 +1458,19 @@ ...@@ -1458,19 +1458,19 @@
'selected': !!option.selected, 'selected': !!option.selected,
'disabled': !!option.disabled 'disabled': !!option.disabled
}; };
//Loop through attributes object and add key-value for each attribute //Loop through attributes object and add key-value for each attribute
for (var key in option.attributes) { for (var key in option.attributes) {
attributes['data-' + key] = option.attributes[key]; attributes['data-' + key] = option.attributes[key];
} }
//Append original attributes + new data attributes to option //Append original attributes + new data attributes to option
$tag = $('<option/>').attr(attributes); $tag = $('<option/>').attr(attributes);
$tag.text(option.label || option.value); $tag.text(option.label || option.value);
} }
$select.append($tag); $select.append($tag);
}); });
this.rebuild(); this.rebuild();
}, },
...@@ -1519,31 +1519,31 @@ ...@@ -1519,31 +1519,31 @@
hasSelectAll: function() { hasSelectAll: function() {
return $('li.multiselect-all', this.$ul).length > 0; return $('li.multiselect-all', this.$ul).length > 0;
}, },
/** /**
* Update opt groups. * Update opt groups.
*/ */
updateOptGroups: function() { updateOptGroups: function() {
var $groups = $('li.multiselect-group', this.$ul) var $groups = $('li.multiselect-group', this.$ul)
$groups.each(function() { $groups.each(function() {
var $options = $(this).nextUntil('li.multiselect-group') var $options = $(this).nextUntil('li.multiselect-group')
.not('.multiselect-filter-hidden') .not('.multiselect-filter-hidden')
.not('.disabled'); .not('.disabled');
var checked = true; var checked = true;
$options.each(function() { $options.each(function() {
var $input = $('input', this); var $input = $('input', this);
if (!$input.prop('checked')) { if (!$input.prop('checked')) {
checked = false; checked = false;
} }
}); });
$('input', this).prop('checked', checked); $('input', this).prop('checked', checked);
}); });
}, },
/** /**
* Updates the select all checkbox based on the currently displayed and selected checkboxes. * Updates the select all checkbox based on the currently displayed and selected checkboxes.
*/ */
...@@ -1554,7 +1554,7 @@ ...@@ -1554,7 +1554,7 @@
var checkedBoxesLength = allBoxes.filter(":checked").length; var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li.multiselect-all", this.$ul); var selectAllLi = $("li.multiselect-all", this.$ul);
var 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);
selectAllLi.addClass(this.options.selectedClass); selectAllLi.addClass(this.options.selectedClass);
...@@ -1577,7 +1577,7 @@ ...@@ -1577,7 +1577,7 @@
*/ */
updateButtonText: function() { updateButtonText: function() {
var options = this.getSelected(); var options = this.getSelected();
// First update the displayed button text. // First update the displayed button text.
if (this.options.enableHTML) { if (this.options.enableHTML) {
$('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select)); $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
...@@ -1585,7 +1585,7 @@ ...@@ -1585,7 +1585,7 @@
else { else {
$('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select)); $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
} }
// Now update the title attribute of the button. // Now update the title attribute of the button.
$('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select)); $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
}, },
...@@ -1671,7 +1671,7 @@ ...@@ -1671,7 +1671,7 @@
// Call multiselect method. // Call multiselect method.
if (typeof option === 'string') { if (typeof option === 'string') {
data[option](parameter, extraOptions); data[option](parameter, extraOptions);
if (option === 'destroy') { if (option === 'destroy') {
$(this).data('multiselect', false); $(this).data('multiselect', false);
} }
......
index.html
View file @ 06549a01
...@@ -47,19 +47,19 @@ ...@@ -47,19 +47,19 @@
<div class="page-header"> <div class="page-header">
<h1>Bootstrap Multiselect</h1> <h1>Bootstrap Multiselect</h1>
</div> </div>
<p class="alert alert-warning"> <p class="alert alert-warning">
<b>Some option names may have changed during the last few commits!</b> <b>Some option names may have changed during the last few commits!</b>
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
<b>Please consult the <a href="#faq">FAQ</a>, the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a> or <a href="http://stackoverflow.com/questions/tagged/bootstrap-multiselect">StackOverflow</a> before creating a new issue.</b> <b>Please consult the <a href="#faq">FAQ</a>, the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a> or <a href="http://stackoverflow.com/questions/tagged/bootstrap-multiselect">StackOverflow</a> before creating a new issue.</b>
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
<b>Please have a look at <a href="#how-to-contribute">"How to contribute?"</a>.</b> <b>Please have a look at <a href="#how-to-contribute">"How to contribute?"</a>.</b>
</p> </p>
<div class="page-header"> <div class="page-header">
<h2 id="getting-started">Getting Started</h2> <h2 id="getting-started">Getting Started</h2>
</div> </div>
...@@ -148,11 +148,11 @@ ...@@ -148,11 +148,11 @@
</div> </div>
</li> </li>
</ol> </ol>
<div class="page-header"> <div class="page-header">
<h2 id="configuration-options">Configuration Options</h2> <h2 id="configuration-options">Configuration Options</h2>
</div> </div>
<table class="table table-condensed"> <table class="table table-condensed">
<thead> <thead>
<tr> <tr>
...@@ -234,11 +234,11 @@ ...@@ -234,11 +234,11 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p class="alert alert-info"> <p class="alert alert-info">
Use Firebug, Chrome Developer Tools to get the best out of the below examples. Use Firebug, Chrome Developer Tools to get the best out of the below examples.
</p> </p>
<table class="table layout-fixed"> <table class="table layout-fixed">
<tbody> <tbody>
<tr> <tr>
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
<p> <p>
<code>multiple</code> is not a real configuration option. It refers to the <code>multiple</code> attribute of the <code>select</code> the plugin is applied on. When the <code>multiple</code> attribute of the <code>select</code> is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the <code>multiple</code> attribute present), the first option will automatically be selected if no other option is selected in advance. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior. <code>multiple</code> is not a real configuration option. It refers to the <code>multiple</code> attribute of the <code>select</code> the plugin is applied on. When the <code>multiple</code> attribute of the <code>select</code> is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the <code>multiple</code> attribute present), the first option will automatically be selected if no other option is selected in advance. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior.
</p> </p>
<p> <p>
The following example shows the default behavior when the <code>multiple</code> attribute is omitted: The following example shows the default behavior when the <code>multiple</code> attribute is omitted:
</p> </p>
...@@ -283,11 +283,11 @@ ...@@ -283,11 +283,11 @@
&lt;/select&gt; &lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
If multiple options are selected in advance and the <code>select</code> lacks the <code>multiple</code> attribute, the last option marked as <code>selected</code> will initially be selected by the plugin. If multiple options are selected in advance and the <code>select</code> lacks the <code>multiple</code> attribute, the last option marked as <code>selected</code> will initially be selected by the plugin.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -320,11 +320,11 @@ ...@@ -320,11 +320,11 @@
&lt;/select&gt; &lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
The following example shows the default behavior when the <code>multiple</code> attribute is present. Initially selected options will be adopted automatically: The following example shows the default behavior when the <code>multiple</code> attribute is present. Initially selected options will be adopted automatically:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -356,11 +356,11 @@ ...@@ -356,11 +356,11 @@
&lt;option value="6"&gt;Option 6&lt;/option&gt; &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt; &lt;/select&gt;
</pre> </pre>
<p> <p>
The plugin naturally supports <code>optgroup</code>s, however the group headers are not clickable by default. See the <code>enableClickableOptGroups</code> option for details. The plugin naturally supports <code>optgroup</code>s, however the group headers are not clickable by default. See the <code>enableClickableOptGroups</code> option for details.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -399,11 +399,11 @@ ...@@ -399,11 +399,11 @@
&lt;/select&gt; &lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that the classes of the <code>optgroup</code>s are adopted, allowing to select individual <code>optgroup</code>s easily (inspect the created markup to note the difference!): Note that the classes of the <code>optgroup</code>s are adopted, allowing to select individual <code>optgroup</code>s easily (inspect the created markup to note the difference!):
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -539,11 +539,11 @@ ...@@ -539,11 +539,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that this option does also work with disabled options: Note that this option does also work with disabled options:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -577,11 +577,11 @@ ...@@ -577,11 +577,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that the behavior of <code>onChange</code> changes. Whenever an optgroup is changed/clicked, the <code>onChange</code> event is fired with all affected options as first parameter. Note that the behavior of <code>onChange</code> changes. Whenever an optgroup is changed/clicked, the <code>onChange</code> event is fired with all affected options as first parameter.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -620,11 +620,11 @@ ...@@ -620,11 +620,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that the <code>optgroup</code>'s are automatically selected if a whole group is selected by default: Note that the <code>optgroup</code>'s are automatically selected if a whole group is selected by default:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -670,8 +670,10 @@ ...@@ -670,8 +670,10 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({ $('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapisbleOptGroups-container" />'
}); });
$('#example-enableCollapisbleOptGroups-container .caret-container').click();
}); });
</script> </script>
<select id="example-enableCollapsibleOptGroups" multiple="multiple"> <select id="example-enableCollapsibleOptGroups" multiple="multiple">
...@@ -698,15 +700,15 @@ ...@@ -698,15 +700,15 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Both options, <code>enableCollapsibleOptGroups</code> and <code>enableCollapsibleOptGroups</code>, can also be combined: Both options, <code>enableCollapsibleOptGroups</code> and <code>enableCollapsibleOptGroups</code>, can also be combined:
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
Note, however, that the behavior of combining both options might not be as expected - play around with the below example to get some intuition. Note, however, that the behavior of combining both options might not be as expected - play around with the below example to get some intuition.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -740,15 +742,57 @@ ...@@ -740,15 +742,57 @@
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div>
<p>
The groups can be collapsed by default using the following simple trick:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
});
</script>
<select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
enableCollapsibleOptGroups: true,
buttonContainer: '&lt;div id=&quot;example-enableCollapsibleOptGroups-collapsed-container&quot; /&gt;'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
});
&lt;/script&gt;
</pre>
</div>
<p> <p>
Combining the above with <code>enableFiltering</code> and <code>includeSelectAllOption</code>: Combining the above with <code>enableFiltering</code> and <code>includeSelectAllOption</code>:
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
Again, note, that the behavior of combining <code>enableCollapsibleOptGroups</code>, <code>enableCollapsibleOptGroups</code>, <code>enableFiltering</code> and <code>includeSelectAllOption</code> is not thoroughly tested. <b>Experiment with the example below to get some intuition.</b> Again, note, that the behavior of combining <code>enableCollapsibleOptGroups</code>, <code>enableCollapsibleOptGroups</code>, <code>enableFiltering</code> and <code>includeSelectAllOption</code> is not thoroughly tested. <b>Experiment with the example below to get some intuition.</b>
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -786,6 +830,7 @@ ...@@ -786,6 +830,7 @@
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -848,11 +893,11 @@ ...@@ -848,11 +893,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled: The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -889,11 +934,11 @@ ...@@ -889,11 +934,11 @@
&lt;/select&gt; &lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that selected options will still be shown: Note that selected options will still be shown:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -977,11 +1022,11 @@ ...@@ -977,11 +1022,11 @@
<p> <p>
The dropdown can also be dropped up. Note that it is recommended to also set <code>maxHeight</code>. The plugin calculates the necessary height of the dropdown and takes the minimum of the calculated value and <code>maxHeight</code>. The dropdown can also be dropped up. Note that it is recommended to also set <code>maxHeight</code>. The plugin calculates the necessary height of the dropdown and takes the minimum of the calculated value and <code>maxHeight</code>.
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
Note that this feature has been introduced in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a> and is known to have issues depending on the environment. Note that this feature has been introduced in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a> and is known to have issues depending on the environment.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1160,7 +1205,7 @@ ...@@ -1160,7 +1205,7 @@
<p class="alert alert-warning"> <p class="alert alert-warning">
Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>. Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1260,7 +1305,7 @@ ...@@ -1260,7 +1305,7 @@
<p> <p>
A callback called when the dropdown is shown. A callback called when the dropdown is shown.
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
The <code>onDropdownShow</code> option is not available when using Twitter Bootstrap 2.3. The <code>onDropdownShow</code> option is not available when using Twitter Bootstrap 2.3.
</p> </p>
...@@ -1309,7 +1354,7 @@ ...@@ -1309,7 +1354,7 @@
<p class="alert alert-warning"> <p class="alert alert-warning">
The <code>onDropdownHide</code> option is not available when using Twitter Bootstrap 2.3. The <code>onDropdownHide</code> option is not available when using Twitter Bootstrap 2.3.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1354,7 +1399,7 @@ ...@@ -1354,7 +1399,7 @@
<p class="alert alert-warning"> <p class="alert alert-warning">
The <code>onDropdownShown</code> option is not available when using Twitter Bootstrap 2.3. The <code>onDropdownShown</code> option is not available when using Twitter Bootstrap 2.3.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1399,7 +1444,7 @@ ...@@ -1399,7 +1444,7 @@
<p class="alert alert-warning"> <p class="alert alert-warning">
The <code>onDropdownHidden</code> option is not available when using Twitter Bootstrap 2.3. The <code>onDropdownHidden</code> option is not available when using Twitter Bootstrap 2.3.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1551,11 +1596,11 @@ ...@@ -1551,11 +1596,11 @@
<p> <p>
The width of the multiselect button may be fixed using this option. The width of the multiselect button may be fixed using this option.
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Actually, <code>buttonWidth</code> describes the width of the <code>.btn-group</code> container and the width of the <code>button</code> is set to <code>100%</code>. Actually, <code>buttonWidth</code> describes the width of the <code>.btn-group</code> container and the width of the <code>button</code> is set to <code>100%</code>.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1584,9 +1629,9 @@ ...@@ -1584,9 +1629,9 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p>Note that if the text in the button title is too long, it will be truncated and use an ellipsis</p> <p>Note that if the text in the button title is too long, it will be truncated and use an ellipsis</p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1615,11 +1660,11 @@ ...@@ -1615,11 +1660,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
This does also work for long options: This does also work for long options:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1895,11 +1940,11 @@ ...@@ -1895,11 +1940,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
This option may be useful in combination with the <code>includeSelectAllOption</code>: This option may be useful in combination with the <code>includeSelectAllOption</code>:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -1930,11 +1975,11 @@ ...@@ -1930,11 +1975,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that the <code>allSelectedText</code> is not shown if only one option is available. Note that the <code>allSelectedText</code> is not shown if only one option is available.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2028,7 +2073,7 @@ ...@@ -2028,7 +2073,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$('#example-delimiterText').multiselect({ $('#example-delimiterText').multiselect({
delimiterText '; ' delimiterText '; '
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -2098,7 +2143,7 @@ ...@@ -2098,7 +2143,7 @@
$('#example-optionClass').multiselect({ $('#example-optionClass').multiselect({
optionClass: function(element) { optionClass: function(element) {
var value = $(element).val(); var value = $(element).val();
if (value%2 == 0) { if (value%2 == 0) {
return 'even'; return 'even';
} }
...@@ -2223,7 +2268,7 @@ ...@@ -2223,7 +2268,7 @@
<p class="alert alert-info"> <p class="alert alert-info">
To see an example using both the select all option and the filter, see the documentation of the <code>enableFiltering</code> option. To see an example using both the select all option and the filter, see the documentation of the <code>enableFiltering</code> option.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2252,11 +2297,11 @@ ...@@ -2252,11 +2297,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The <code>includeSelectAllOption</code> option can also be used in combination with <code>optgroup</code>'s. The <code>includeSelectAllOption</code> option can also be used in combination with <code>optgroup</code>'s.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2289,11 +2334,11 @@ ...@@ -2289,11 +2334,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Note that the select all does not trigger the <code>onChange</code> event and only triggers the <code>onSelectAll</code> event: Note that the select all does not trigger the <code>onChange</code> event and only triggers the <code>onSelectAll</code> event:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2328,11 +2373,11 @@ ...@@ -2328,11 +2373,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The select all element naturally respects disabled elements: The select all element naturally respects disabled elements:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2371,7 +2416,7 @@ ...@@ -2371,7 +2416,7 @@
<p> <p>
Setting both <code>includeSelectAllOption</code> and <code>enableFiltering</code> to <code>true</code>, the select all option does always select only the visible option. With setting <code>selectAllJustVisible</code> to <code>false</code> this behavior is changed such that always all options (irrespective of whether they are visible) are selected. Setting both <code>includeSelectAllOption</code> and <code>enableFiltering</code> to <code>true</code>, the select all option does always select only the visible option. With setting <code>selectAllJustVisible</code> to <code>false</code> this behavior is changed such that always all options (irrespective of whether they are visible) are selected.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2486,9 +2531,9 @@ ...@@ -2486,9 +2531,9 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p> <p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2692,11 +2737,11 @@ ...@@ -2692,11 +2737,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The <code>enableFiltering</code> option can easily be used in combination with the <code>includeSelectAllOption</code> option: The <code>enableFiltering</code> option can easily be used in combination with the <code>includeSelectAllOption</code> option:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -2736,7 +2781,7 @@ ...@@ -2736,7 +2781,7 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The <code>enableFiltering</code> option can also be used in combination with <code>optgroup</code>'s. The <code>enableFiltering</code> option can also be used in combination with <code>optgroup</code>'s.
</p> </p>
...@@ -2772,7 +2817,7 @@ ...@@ -2772,7 +2817,7 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Clickable <code>optgroup</code>'s are also supported: Clickable <code>optgroup</code>'s are also supported:
</p> </p>
...@@ -2810,7 +2855,7 @@ ...@@ -2810,7 +2855,7 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Finally, the option can also be used together with <code>onChange</code> or similar events: Finally, the option can also be used together with <code>onChange</code> or similar events:
</p> </p>
...@@ -3105,20 +3150,20 @@ ...@@ -3105,20 +3150,20 @@
<div class="page-header"> <div class="page-header">
<h2 id="templates">Templates</h2> <h2 id="templates">Templates</h2>
</div> </div>
<p> <p>
The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below: The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class <code>.multiselect</code>, However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class <code>.multiselect</code>,
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
In addition, note that other options may also have influence on the templates, for example the <code>buttonClass</code> option. In addition, note that other options may also have influence on the templates, for example the <code>buttonClass</code> option.
</p> </p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
...@@ -3136,11 +3181,11 @@ ...@@ -3136,11 +3181,11 @@
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
<p> <p>
For example other elements instead of buttons may be used by adapting the template: For example other elements instead of buttons may be used by adapting the template:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -3192,13 +3237,13 @@ ...@@ -3192,13 +3237,13 @@
&lt;/style&gt; &lt;/style&gt;
</pre> </pre>
</div> </div>
<div class="page-header"> <div class="page-header">
<h2 id="styling">Styling</h2> <h2 id="styling">Styling</h2>
</div> </div>
<p>The style of the pluign is fully adaptable through CSS; a completely rendered example is shown below - including select all option, filter and option gorups_</p> <p>The style of the pluign is fully adaptable through CSS; a completely rendered example is shown below - including select all option, filter and option gorups_</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt; &lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt;
&lt;!-- Filter --&gt; &lt;!-- Filter --&gt;
...@@ -3244,11 +3289,11 @@ ...@@ -3244,11 +3289,11 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<p> <p>
The most important classes are: <code>multiselect-container</code>, <code>multiselect-filter</code>, <code>multiselect-all</code>, <code>multiselect-item</code>, <code>multiselect-group</code> as well as <code>disabled</code> and <code>active</code>. Both for collapsing and filtering options, the classes <code>multiselect-filter-hidden</code> and <code>multiselect-collapsible-hidden</code> are used. The most important classes are: <code>multiselect-container</code>, <code>multiselect-filter</code>, <code>multiselect-all</code>, <code>multiselect-item</code>, <code>multiselect-group</code> as well as <code>disabled</code> and <code>active</code>. Both for collapsing and filtering options, the classes <code>multiselect-filter-hidden</code> and <code>multiselect-collapsible-hidden</code> are used.
</p> </p>
<div class="page-header"> <div class="page-header">
<h2 id="methods">Methods</h2> <h2 id="methods">Methods</h2>
</div> </div>
...@@ -3500,11 +3545,11 @@ ...@@ -3500,11 +3545,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option. The method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3550,11 +3595,11 @@ ...@@ -3550,11 +3595,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually! The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually!
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3652,11 +3697,11 @@ ...@@ -3652,11 +3697,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The method provides an additional parameter: <code>.multiselect('deselect', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option. The method provides an additional parameter: <code>.multiselect('deselect', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3702,11 +3747,11 @@ ...@@ -3702,11 +3747,11 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually. The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3766,11 +3811,11 @@ ...@@ -3766,11 +3811,11 @@
<p class="alert alert-info"> <p class="alert alert-info">
Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened. Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>. Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3833,11 +3878,11 @@ ...@@ -3833,11 +3878,11 @@
<p class="alert alert-info"> <p class="alert alert-info">
Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened. Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>. Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3896,11 +3941,11 @@ ...@@ -3896,11 +3941,11 @@
<p> <p>
When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button. When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Note that usually this method is only needed when using <code>.multiselect('selectAll', justVisible)</code> or <code>.multiselect('deselectAll', justVisible)</code>. In all other cases, <code>.multiselect('refresh')</code> should be used. Note that usually this method is only needed when using <code>.multiselect('selectAll', justVisible)</code> or <code>.multiselect('deselectAll', justVisible)</code>. In all other cases, <code>.multiselect('refresh')</code> should be used.
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -3912,10 +3957,10 @@ ...@@ -3912,10 +3957,10 @@
$('#example-updateButtonText-select').on('click', function() { $('#example-updateButtonText-select').on('click', function() {
$('option[value="1"]', $('#example-updateButtonText')).prop('selected', true); $('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
$('option[value="3"]', $('#example-updateButtonText')).prop('selected', true); $('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
$('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true); $('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true); $('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active'); $('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
$('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active'); $('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
}); });
...@@ -3945,7 +3990,7 @@ ...@@ -3945,7 +3990,7 @@
$('#example-deselectAll').multiselect(); $('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() { $('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('updateButtonText', true); $('#example-deselectAll').multiselect('updateButtonText', true);
}); });
}); });
...@@ -4205,11 +4250,11 @@ ...@@ -4205,11 +4250,11 @@
&lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt; &lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
The method is also able to handle <code>optgroup</code>'s: The method is also able to handle <code>optgroup</code>'s:
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -4264,11 +4309,11 @@ ...@@ -4264,11 +4309,11 @@
&lt;select id=&quot;example-dataprovider-optgroups&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt; &lt;select id=&quot;example-dataprovider-optgroups&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre> </pre>
</div> </div>
<p> <p>
You can add custom data attributes on option group children and non-grouped options: You can add custom data attributes on option group children and non-grouped options:
</p> </p>
<div class="example"> <div class="example">
<div class="btn-group"> <div class="btn-group">
<script type="text/javascript"> <script type="text/javascript">
...@@ -4297,8 +4342,8 @@ ...@@ -4297,8 +4342,8 @@
}); });
</script> </script>
<select id="example-dataprovider-data-attributes" multiple="multiple"></select> <select id="example-dataprovider-data-attributes" multiple="multiple"></select>
</div> </div>
<div class="highlight"> <div class="highlight">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -4353,17 +4398,17 @@ ...@@ -4353,17 +4398,17 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"}); $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#new-all-selected-text-btn').click(function(){ $('#new-all-selected-text-btn').click(function(){
$('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val()); $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
}); });
}); });
</script> </script>
<select id="example-set-all-selected-text" multiple="multiple"> <select id="example-set-all-selected-text" multiple="multiple">
<option value="1" selected>Option 1</option> <option value="1" selected>Option 1</option>
</select> </select>
<input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text"/> <input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text"/>
<input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text"/> <input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text"/>
</div> </div>
...@@ -4372,9 +4417,9 @@ ...@@ -4372,9 +4417,9 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"}); $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#new-all-selected-text-btn').click(function(){ $('#new-all-selected-text-btn').click(function(){
$('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val()); $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
...@@ -4446,7 +4491,7 @@ ...@@ -4446,7 +4491,7 @@
</div> </div>
<p> <p>
The above approach can also be adapted to be used in The above approach can also be adapted to be used in
</p> </p>
<div class="example"> <div class="example">
...@@ -4495,7 +4540,7 @@ ...@@ -4495,7 +4540,7 @@
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p> <p>
Limit the number of selected options using the <code>onChange</code> option. The user may only select a maximum of 4 options. Then all other options are disabled. Limit the number of selected options using the <code>onChange</code> option. The user may only select a maximum of 4 options. Then all other options are disabled.
</p> </p>
...@@ -4779,7 +4824,7 @@ ...@@ -4779,7 +4824,7 @@
<p> <p>
Using a reset button together with a multiselect. Using a reset button together with a multiselect.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -4836,11 +4881,11 @@ ...@@ -4836,11 +4881,11 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
<p> <p>
Multiselect can also be used in modals: Multiselect can also be used in modals:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -4899,15 +4944,15 @@ ...@@ -4899,15 +4944,15 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<p> <p>
An example of using multiselect in an accordion/collapse: An example of using multiselect in an accordion/collapse:
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Note that the overflow of the <code>.panel</code> needs to be visible: <code>style="overflow:visible;"</code>. See the example below. Note that the overflow of the <code>.panel</code> needs to be visible: <code>style="overflow:visible;"</code>. See the example below.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -4970,7 +5015,7 @@ ...@@ -4970,7 +5015,7 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<p> <p>
The examples below are aimed to demonstrate the performance of several features when using a large number of options: The examples below are aimed to demonstrate the performance of several features when using a large number of options:
</p> </p>
...@@ -4980,25 +5025,25 @@ ...@@ -4980,25 +5025,25 @@
<li>Additionally using <code>enableClickableOptGroups</code>.</li> <li>Additionally using <code>enableClickableOptGroups</code>.</li>
<li>Resetting the multiselect.</li> <li>Resetting the multiselect.</li>
</ul> </ul>
<p class="alert alert-warning"> <p class="alert alert-warning">
The below examples need to be activated. <b>Note that this may take some time!</b><br> The below examples need to be activated. <b>Note that this may take some time!</b><br>
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
Use <input type="text" id="example-large-options" value="1000" style="width: 50px;margin: 0px 4px;"/> options: <button id="example-large-enable" class="btn btn-primary">Enable Examples</button> Use <input type="text" id="example-large-options" value="1000" style="width: 50px;margin: 0px 4px;"/> options: <button id="example-large-enable" class="btn btn-primary">Enable Examples</button>
</p> </p>
<div id="example-large-error"> <div id="example-large-error">
</div> </div>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example-large-enable').on('click', function() { $('#example-large-enable').on('click', function() {
var options = $('#example-large-options').val(); var options = $('#example-large-options').val();
if (options < 1 || options > 5000) { if (options < 1 || options > 5000) {
$('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>'); $('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
} }
...@@ -5007,19 +5052,19 @@ ...@@ -5007,19 +5052,19 @@
$('#example-large-includeSelectAllOption-enableFiltering').html(''); $('#example-large-includeSelectAllOption-enableFiltering').html('');
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html(''); $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
$('#example-large-reset').html(''); $('#example-large-reset').html('');
for (var j = 0; j < options; j++) { for (var j = 0; j < options; j++) {
i = j + 1; i = j + 1;
$('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>'); $('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
$('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>'); $('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
var group = Math.floor(j/10) + 1; var group = Math.floor(j/10) + 1;
var number = j % 10 + 1; var number = j % 10 + 1;
if (number === 1) { if (number === 1) {
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>'); $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
} }
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>'); $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
$('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>'); $('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
} }
...@@ -5177,13 +5222,13 @@ ...@@ -5177,13 +5222,13 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
<p>The following examples is aimed to demonstrate the performance of the <code>.multiselect('dataprovider', data)</code> for a large number of options.</p> <p>The following examples is aimed to demonstrate the performance of the <code>.multiselect('dataprovider', data)</code> for a large number of options.</p>
<p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p> <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
<p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p> <p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5196,10 +5241,10 @@ ...@@ -5196,10 +5241,10 @@
value: i + '-' + j value: i + '-' + j
}); });
} }
data.push(group); data.push(group);
} }
$('#example-large-dataprovider-button').on('click', function() { $('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({ $('#example-large-dataprovider').multiselect({
maxHeight: 200 maxHeight: 200
...@@ -5236,11 +5281,11 @@ $(document).ready(function() { ...@@ -5236,11 +5281,11 @@ $(document).ready(function() {
&lt;p class=&quot;alert alert-info&quot;&gt;&lt;button id=&quot;example-large-dataprovider-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate&lt;/button&gt;&lt;/p&gt; &lt;p class=&quot;alert alert-info&quot;&gt;&lt;button id=&quot;example-large-dataprovider-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate&lt;/button&gt;&lt;/p&gt;
&lt;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt; &lt;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre> </pre>
<p> <p>
The following example illsutrates how to disable options using JavaScript. The following example illsutrates how to disable options using JavaScript.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5288,15 +5333,15 @@ $(document).ready(function() { ...@@ -5288,15 +5333,15 @@ $(document).ready(function() {
}); });
&lt;select id=&quot;example-disable-javascript&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt; &lt;select id=&quot;example-disable-javascript&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre> </pre>
<p> <p>
Performance example for using <code>.multiselect('refresh')</code> with a large number of options: Performance example for using <code>.multiselect('refresh')</code> with a large number of options:
</p> </p>
<p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p> <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
<p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p> <p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5304,34 +5349,34 @@ $(document).ready(function() { ...@@ -5304,34 +5349,34 @@ $(document).ready(function() {
for (var i = 0; i < 1000; i++) { for (var i = 0; i < 1000; i++) {
$('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>'); $('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
} }
$('#example-large-refresh').multiselect(); $('#example-large-refresh').multiselect();
}); });
$('#example-large-refresh-refresh').on('click', function() { $('#example-large-refresh-refresh').on('click', function() {
$('#example-large-refresh').multiselect('refresh'); $('#example-large-refresh').multiselect('refresh');
}); });
$('#example-large-refresh-select').on('click', function() { $('#example-large-refresh-select').on('click', function() {
var count = 0; var count = 0;
$('#example-large-refresh option').each(function() { $('#example-large-refresh option').each(function() {
var i = $(this).val(); var i = $(this).val();
if (i%2 == 0) { if (i%2 == 0) {
$(this).prop('selected', true); $(this).prop('selected', true);
count++; count++;
} }
}); });
alert('Selected ' + count + ' options!'); alert('Selected ' + count + ' options!');
}); });
}); });
</script> </script>
<div class="btn-group"> <div class="btn-group">
<select id="example-large-refresh" multiple="multiple"> <select id="example-large-refresh" multiple="multiple">
</select> </select>
<button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button> <button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
<button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button> <button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
...@@ -5372,9 +5417,9 @@ $(document).ready(function() { ...@@ -5372,9 +5417,9 @@ $(document).ready(function() {
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</div> </div>
<p>The following example demonstrates how to limit the number of selections of a specific <code>optgroup</code>:</p> <p>The following example demonstrates how to limit the number of selections of a specific <code>optgroup</code>:</p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5382,12 +5427,12 @@ $(document).ready(function() { ...@@ -5382,12 +5427,12 @@ $(document).ready(function() {
onChange: function(options, checked) { onChange: function(options, checked) {
var $option = $(options); var $option = $(options);
if ($option.length == 1) { if ($option.length == 1) {
var $group = $option.parent('optgroup') var $group = $option.parent('optgroup')
if ($group.hasClass('group-1')) { if ($group.hasClass('group-1')) {
var $options = $('option', $group); var $options = $('option', $group);
$options = $options.filter(':selected'); $options = $options.filter(':selected');
if (checked && $options.length > 2) { if (checked && $options.length > 2) {
alert('Cannot select more than 2 elements in this group!'); alert('Cannot select more than 2 elements in this group!');
$("#example-optgroup-limit").multiselect('deselect', $option.val()); $("#example-optgroup-limit").multiselect('deselect', $option.val());
...@@ -5453,20 +5498,20 @@ $(document).ready(function() { ...@@ -5453,20 +5498,20 @@ $(document).ready(function() {
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<p> <p>
The below example demonstrates how to show the <code>optgroup</code>'s label if all <code>option</code>'s within this group are selected: The below example demonstrates how to show the <code>optgroup</code>'s label if all <code>option</code>'s within this group are selected:
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example-optgroup-buttonText').multiselect({ $('#example-optgroup-buttonText').multiselect({
buttonText: function(options, select) { buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty. // First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length > 0 if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled')) && (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) { && options.length == 0) {
return this.disabledText; return this.disabledText;
...@@ -5474,18 +5519,18 @@ $(document).ready(function() { ...@@ -5474,18 +5519,18 @@ $(document).ready(function() {
else if (options.length === 0) { else if (options.length === 0) {
return this.nonSelectedText; return this.nonSelectedText;
} }
var $select = $(select); var $select = $(select);
var $optgroups = $('optgroup', $select); var $optgroups = $('optgroup', $select);
var delimiter = this.delimiterText; var delimiter = this.delimiterText;
var text = ''; var text = '';
// Go through groups. // Go through groups.
$optgroups.each(function() { $optgroups.each(function() {
var $selectedOptions = $('option:selected', this); var $selectedOptions = $('option:selected', this);
var $options = $('option', this); var $options = $('option', this);
if ($selectedOptions.length == $options.length) { if ($selectedOptions.length == $options.length) {
text += $(this).attr('label') + delimiter; text += $(this).attr('label') + delimiter;
} }
...@@ -5495,12 +5540,12 @@ $(document).ready(function() { ...@@ -5495,12 +5540,12 @@ $(document).ready(function() {
}); });
} }
}); });
var $remainingOptions = $('option:selected', $select).not('optgroup option'); var $remainingOptions = $('option:selected', $select).not('optgroup option');
$remainingOptions.each(function() { $remainingOptions.each(function() {
text += $(this).text() + delimiter; text += $(this).text() + delimiter;
}); });
return text.substr(0, text.length - 2); return text.substr(0, text.length - 2);
} }
}); });
...@@ -5529,8 +5574,8 @@ $(document).ready(function() { ...@@ -5529,8 +5574,8 @@ $(document).ready(function() {
buttonText: function(options, select) { buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty. // First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length &gt; 0 if (this.disabledText.length &gt; 0
&& (this.disableIfEmpty || select.prop('disabled')) && (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) { && options.length == 0) {
return this.disabledText; return this.disabledText;
...@@ -5586,9 +5631,9 @@ $(document).ready(function() { ...@@ -5586,9 +5631,9 @@ $(document).ready(function() {
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<p>The following example demonstrates how to set the class of <code>li.active</code>'s parent elements:</p> <p>The following example demonstrates how to set the class of <code>li.active</code>'s parent elements:</p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5598,7 +5643,7 @@ $(document).ready(function() { ...@@ -5598,7 +5643,7 @@ $(document).ready(function() {
// Get checkbox corresponding to option: // Get checkbox corresponding to option:
var value = $(options).val(); var value = $(options).val();
var $input = $('#example-selected-parents-container input[value="' + value + '"]'); var $input = $('#example-selected-parents-container input[value="' + value + '"]');
// Adapt label class: // Adapt label class:
if (selected) { if (selected) {
$input.closest('label').addClass('active'); $input.closest('label').addClass('active');
...@@ -5665,23 +5710,23 @@ $(document).ready(function() { ...@@ -5665,23 +5710,23 @@ $(document).ready(function() {
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<div class="page-header"> <div class="page-header">
<h2 id="post">Server-Side Processing</h2> <h2 id="post">Server-Side Processing</h2>
</div> </div>
<p class="alert alert-warning"> <p class="alert alert-warning">
The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - <b>download the repository and try it on a local server</b>. The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - <b>download the repository and try it on a local server</b>.
</p> </p>
<p> <p>
In order to receive the correct data after submitting the form, the used <code>select</code> has to have an appropriate name. Note that an <code>[]</code> needs to be appended to the name when using the <code>multiple</code> option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting <code>checkboxName</code>. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the <code>selectAllName</code> option. The value of the select all checkbox can be controlled by the <code>selectAllValue</code> option while the values of the remaining checkboxes correspond to the values used by the <code>option</code>'s of the original <code>select</code>. In order to receive the correct data after submitting the form, the used <code>select</code> has to have an appropriate name. Note that an <code>[]</code> needs to be appended to the name when using the <code>multiple</code> option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting <code>checkboxName</code>. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the <code>selectAllName</code> option. The value of the select all checkbox can be controlled by the <code>selectAllValue</code> option while the values of the remaining checkboxes correspond to the values used by the <code>option</code>'s of the original <code>select</code>.
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
The plugin naturally supports the <code>required</code> attribute. The plugin naturally supports the <code>required</code> attribute.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5802,15 +5847,15 @@ $(document).ready(function() { ...@@ -5802,15 +5847,15 @@ $(document).ready(function() {
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
<p> <p>
The <code>checkboxName</code> option can also be used to assign different names to the <code>option's</code>, for example for different <code>optgroup</code>s. The <code>checkboxName</code> option can also be used to assign different names to the <code>option's</code>, for example for different <code>optgroup</code>s.
</p> </p>
<p class="alert alert-warning"> <p class="alert alert-warning">
Note that in the below example, <code>$_POST</code> will contain both the <code>multiselect</code> and the <code>group1</code> as well as <code>group2</code> keys. Note that in the below example, <code>$_POST</code> will contain both the <code>multiselect</code> and the <code>group1</code> as well as <code>group2</code> keys.
</p> </p>
<div class="example"> <div class="example">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -5895,11 +5940,11 @@ $(document).ready(function() { ...@@ -5895,11 +5940,11 @@ $(document).ready(function() {
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
<div class="page-header"> <div class="page-header">
<h2 id="keyboard-support">Keyboard Support</h2> <h2 id="keyboard-support">Keyboard Support</h2>
</div> </div>
<table class="table table-striped"> <table class="table table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -5916,11 +5961,11 @@ $(document).ready(function() { ...@@ -5916,11 +5961,11 @@ $(document).ready(function() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="page-header"> <div class="page-header">
<h2 id="faq">Frequently Asked Questions</h2> <h2 id="faq">Frequently Asked Questions</h2>
</div> </div>
<dl> <dl>
<div class="alert alert-info"> <div class="alert alert-info">
<dt id="how-to-contribute">How to contribute?</dt> <dt id="how-to-contribute">How to contribute?</dt>
...@@ -5936,42 +5981,42 @@ $(document).ready(function() { ...@@ -5936,42 +5981,42 @@ $(document).ready(function() {
A full list of contributors can be found <a href="https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors">here</a>. A full list of contributors can be found <a href="https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors">here</a>.
</dd> </dd>
</div> </div>
<dt>How about older browsers as for example Internet Explorer 6, 7 and 8?</dt> <dt>How about older browsers as for example Internet Explorer 6, 7 and 8?</dt>
<dd> <dd>
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details. With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
</dd> </dd>
<dt>May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?</dt> <dt>May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?</dt>
<dd> <dd>
The plugin is dual licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> and the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>. The BSD 3-Clause License allows to use the plugin in commercial projects as long as all source files associated with this plugin retain the copyright notice. The plugin is dual licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> and the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>. The BSD 3-Clause License allows to use the plugin in commercial projects as long as all source files associated with this plugin retain the copyright notice.
</dd> </dd>
<dt>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</dt> <dt>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</dt>
<dd> <dd>
The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section. The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
</dd> </dd>
<dt>How to change the button class depending on the number of selected options?</dt> <dt>How to change the button class depending on the number of selected options?</dt>
<dd> <dd>
This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/332">332</a>. This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/332">332</a>.
</dd> </dd>
<dt>Why does the plugin crash when using <code>.multiselect('select', value);</code> or <code>.multiselect('deselect', value);</code>?</dt> <dt>Why does the plugin crash when using <code>.multiselect('select', value);</code> or <code>.multiselect('deselect', value);</code>?</dt>
<dd> <dd>
This may be caused when the class used for the <code>select</code> occurs for other elements, as well. In addition this may be caused if the multiselect has the class <code>.multiselect</code>. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/330">#330</a>. This may be caused when the class used for the <code>select</code> occurs for other elements, as well. In addition this may be caused if the multiselect has the class <code>.multiselect</code>. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/330">#330</a>.
</dd> </dd>
<dt>How to check whether filtering all options resulted no options being displayed (except the select all option)?</dt> <dt>How to check whether filtering all options resulted no options being displayed (except the select all option)?</dt>
<dd> <dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/317">#317</a>. This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/317">#317</a>.
</dd> </dd>
<dt>How to use multiple plugin instances running single selections on one page?</dt> <dt>How to use multiple plugin instances running single selections on one page?</dt>
<dd> <dd>
There is a minor bug when using multiple plugin instances with single selection on one page. The bug is described here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/331">#331</a>. A possible fix is suggested here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/336">#336</a>. There is a minor bug when using multiple plugin instances with single selection on one page. The bug is described here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/331">#331</a>. A possible fix is suggested here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/336">#336</a>.
</dd> </dd>
<dt>How to use the plugin within a <code>form.form-inline</code>?</dt> <dt>How to use the plugin within a <code>form.form-inline</code>?</dt>
<dd> <dd>
This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/322">#322</a> This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/322">#322</a>
...@@ -6003,17 +6048,17 @@ $('#example2').multiselect({ ...@@ -6003,17 +6048,17 @@ $('#example2').multiselect({
}); });
</pre> </pre>
</dd> </dd>
<dt>Why does the plugin not work in Chrome for Mobile?</dt> <dt>Why does the plugin not work in Chrome for Mobile?</dt>
<dd> <dd>
This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">#223</a>. This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">#223</a>.
</dd> </dd>
<dt>How to underline the searched text when using the filter?</dt> <dt>How to underline the searched text when using the filter?</dt>
<dd> <dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309">#309</a>. This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309">#309</a>.
</dd> </dd>
<dt>How to hide the checkboxes?</dt> <dt>How to hide the checkboxes?</dt>
<dd> <dd>
A related issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205">#205</a> and includes a possible solution when using CSS to hide the checkboxes: A related issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205">#205</a> and includes a possible solution when using CSS to hide the checkboxes:
...@@ -6023,7 +6068,7 @@ $('#example2').multiselect({ ...@@ -6023,7 +6068,7 @@ $('#example2').multiselect({
} }
</pre> </pre>
</dd> </dd>
<dt>How to use Bootstrap Multiselect using <code>$.validate</code>?</dt> <dt>How to use Bootstrap Multiselect using <code>$.validate</code>?</dt>
<dd> <dd>
This topic is discussed in issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/347">#347</a>. The fix suggested is as follows: This topic is discussed in issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/347">#347</a>. The fix suggested is as follows:
...@@ -6033,27 +6078,27 @@ var validator = $form.data('validator'); ...@@ -6033,27 +6078,27 @@ var validator = $form.data('validator');
validator.settings.ignore = ':hidden:not(".multiselect")'; validator.settings.ignore = ':hidden:not(".multiselect")';
</pre> </pre>
</dd> </dd>
<dt>How to prevent the plugin from selecting the first option in single select mode?</dt> <dt>How to prevent the plugin from selecting the first option in single select mode?</dt>
<dd> <dd>
This issue is mainly due to the default behavior of most browsers. A workaround can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a>. This issue is mainly due to the default behavior of most browsers. A workaround can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a>.
</dd> </dd>
<dt>Which are the minimum required components of Twitter Botostrap to get the plugin working?</dt> <dt>Which are the minimum required components of Twitter Botostrap to get the plugin working?</dt>
<dd> <dd>
The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/344">#344</a>. The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/344">#344</a>.
</dd> </dd>
<dt>How to use the <code>.multiselect('dataprovider', data)</code> method?</dt> <dt>How to use the <code>.multiselect('dataprovider', data)</code> method?</dt>
<dd> <dd>
Have a look at the <a href="#methods">Methods</a> section. In the past, there has been some confusion about how the method handles option groups. If the documentation does not help you, have a look at the issue tracker, as for example issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/356">#356</a>. Have a look at the <a href="#methods">Methods</a> section. In the past, there has been some confusion about how the method handles option groups. If the documentation does not help you, have a look at the issue tracker, as for example issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/356">#356</a>.
</dd> </dd>
<dt>A <code>type="reset"</code> button does not refresh the multiselect, what to do?</dt> <dt>A <code>type="reset"</code> button does not refresh the multiselect, what to do?</dt>
<dd> <dd>
Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this). Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
</dd> </dd>
<dt>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</dt> <dt>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</dt>
<dd> <dd>
This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>: This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
...@@ -6066,32 +6111,32 @@ $('.multiselect').multiselect({ ...@@ -6066,32 +6111,32 @@ $('.multiselect').multiselect({
</pre> </pre>
where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect. where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
</dd> </dd>
<dt>How to avoid <code>TypeError: Cannot read property "toString" of ...</code>?</dt> <dt>How to avoid <code>TypeError: Cannot read property "toString" of ...</code>?</dt>
<dd> <dd>
This error may be thrown if <code>null</code> or <code>undefined</code> is provided as argument of <code>.multiselect('select', value)</code> or <code>.multiselect('deselect', value)</code>, see <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/386">#386</a>. This error may be thrown if <code>null</code> or <code>undefined</code> is provided as argument of <code>.multiselect('select', value)</code> or <code>.multiselect('deselect', value)</code>, see <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/386">#386</a>.
</dd> </dd>
<dt>Why is there no "uncheck all" option?</dt> <dt>Why is there no "uncheck all" option?</dt>
<dd> <dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a> This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
</dd> </dd>
<dt>Esc does not close the dropdown?!</dt> <dt>Esc does not close the dropdown?!</dt>
<dd> <dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this. This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this.
</dd> </dd>
<dt>How to keep the dropdown open?</dt> <dt>How to keep the dropdown open?</dt>
<dd> <dd>
This issue is discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/426">#426</a>. This issue is discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/426">#426</a>.
</dd> </dd>
<dt>Why is the dropdown not showing (or only partly shown) within modals?</dt> <dt>Why is the dropdown not showing (or only partly shown) within modals?</dt>
<dd> <dd>
This is a general issue not directly related to Bootstrap Multiselect: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/455">#455</a>. This is a general issue not directly related to Bootstrap Multiselect: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/455">#455</a>.
</dd> </dd>
<dt>How do add icons to the options (<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/475">#475</a>)?</dt> <dt>How do add icons to the options (<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/475">#475</a>)?</dt>
<dd> <dd>
Adapt the <code>optionLabel</code> option as follows: Adapt the <code>optionLabel</code> option as follows:
...@@ -6101,12 +6146,12 @@ optionLabel: function(element){ ...@@ -6101,12 +6146,12 @@ optionLabel: function(element){
}, },
</pre> </pre>
</dd> </dd>
<dt>How to add a deselect all functionality (the inverse to the select all option)?</dt> <dt>How to add a deselect all functionality (the inverse to the select all option)?</dt>
<dd> <dd>
This issue was discussed in the following pull request: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/487">#487</a>. This issue was discussed in the following pull request: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/487">#487</a>.
</dd> </dd>
<dt>How to bind object values using Knockout JS?</dt> <dt>How to bind object values using Knockout JS?</dt>
<dd> <dd>
<p>This issue was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/532">#532</a>.</p> <p>This issue was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/532">#532</a>.</p>
...@@ -6120,40 +6165,40 @@ optionLabel: function(element){ ...@@ -6120,40 +6165,40 @@ optionLabel: function(element){
</ul> </ul>
<p>Any other options inside the multiselect data bind are passed to the jQuery multiselect plugin.</p> <p>Any other options inside the multiselect data bind are passed to the jQuery multiselect plugin.</p>
</dd> </dd>
<dt>Options do net get updated when using Angular JS?</dt> <dt>Options do net get updated when using Angular JS?</dt>
<dd> <dd>
This issues was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/519">#519</a>. This issues was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/519">#519</a>.
</dd> </dd>
<dt>Is there a search event?</dt> <dt>Is there a search event?</dt>
<dd> <dd>
This was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/530">#530</a>. This was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/530">#530</a>.
</dd> </dd>
<dt>How to use the plugin with a local jQuery variable?</dt> <dt>How to use the plugin with a local jQuery variable?</dt>
<dd> <dd>
This was discussed (and solved) here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/686">#686</a> This was discussed (and solved) here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/686">#686</a>
</dd> </dd>
<dt>how to use font-awesome for checkboxes?</dt> <dt>how to use font-awesome for checkboxes?</dt>
<dd> <dd>
This issue was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/576">#576</a> This issue was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/576">#576</a>
</dd> </dd>
</dl> </dl>
<div class="page-header"> <div class="page-header">
<h2 id="known-issues">Known Issues</h2> <h2 id="known-issues">Known Issues</h2>
</div> </div>
<p> <p>
See the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>. See the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p> </p>
<div class="page-header"> <div class="page-header">
<h2 id="license">License</h2> <h2 id="license">License</h2>
</div> </div>
<dl> <dl>
<dt>Apache License, Version 2.0</dt> <dt>Apache License, Version 2.0</dt>
<dd> <dd>
...@@ -6183,7 +6228,7 @@ optionLabel: function(element){ ...@@ -6183,7 +6228,7 @@ optionLabel: function(element){
</p> </p>
</dd> </dd>
</dl> </dl>
<hr> <hr>
<p> <p>
&copy; 2012 - 2014 &copy; 2012 - 2014
......
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