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)
*
*
* Apache License, Version 2.0:
* Copyright (c) 2012 - 2015 David Stutz
*
*
* 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
* copy of the License at http://www.apache.org/licenses/LICENSE-2.0
*
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
*
* BSD 3-Clause License:
* Copyright (c) 2012 - 2015 David Stutz
* All rights reserved.
*
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* - Redistributions of source code must retain the above copyright notice,
......@@ -28,7 +28,7 @@
* - 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
* specific prior written permission.
*
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
......@@ -175,12 +175,12 @@
function Multiselect(select, options) {
this.$select = $(select);
// Placeholder via data attributes
if (this.$select.attr("data-placeholder")) {
options.nonSelectedText = this.$select.data("placeholder");
}
this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
// Initialization.
......@@ -199,7 +199,7 @@
this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
this.options.onInitialized = $.proxy(this.options.onInitialized, this);
// Build select all if enabled.
this.buildContainer();
this.buildButton();
......@@ -210,11 +210,11 @@
this.updateButtonText();
this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable();
}
......@@ -230,7 +230,7 @@
* Default text function will either print 'None selected' in case no
* option is selected or a list of the selected options up to a length
* of 3 selected options.
*
*
* @param {jQuery} options
* @param {jQuery} select
* @returns {String}
......@@ -238,15 +238,15 @@
buttonText: function(options, select) {
if (this.disabledText.length > 0
&& (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {
if (this.selectAllNumber) {
......@@ -262,18 +262,18 @@
else {
var selected = '';
var delimiter = this.delimiterText;
options.each(function() {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter;
});
return selected.substr(0, selected.length - this.delimiterText.length);
}
},
/**
* Updates the title of the button similar to the buttonText function.
*
*
* @param {jQuery} options
* @param {jQuery} select
* @returns {@exp;selected@call;substr}
......@@ -285,7 +285,7 @@
else {
var selected = '';
var delimiter = this.delimiterText;
options.each(function () {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter;
......@@ -316,9 +316,9 @@
},
/**
* Triggered on change of the multiselect.
*
*
* Not triggered when selecting/deselecting options manually.
*
*
* @param {jQuery} option
* @param {Boolean} checked
*/
......@@ -343,31 +343,31 @@
},
/**
* Triggered after the dropdown is shown.
*
*
* @param {jQuery} event
*/
onDropdownShown: function(event) {
},
/**
* Triggered after the dropdown is hidden.
*
*
* @param {jQuery} event
*/
onDropdownHidden: function(event) {
},
/**
* Triggered on select all.
*/
onSelectAll: function() {
},
/**
* Triggered on deselect all.
*/
onDeselectAll: function() {
},
/**
* Triggered after initializing.
......@@ -495,12 +495,12 @@
'overflow-x': 'hidden'
});
}
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 moveCalc = height + 34;
this.$ul.css({
'max-height': height + 'px',
'overflow-y': 'auto',
......@@ -508,13 +508,13 @@
'margin-top': "-" + moveCalc + 'px'
});
}
this.$container.append(this.$ul);
},
/**
* Build the dropdown options and binds all necessary events.
*
*
* Uses createDivider and createOptionValue to create the necessary options.
*/
buildDropdownOptions: function() {
......@@ -525,7 +525,7 @@
// Support optgroups and options without a group simultaneously.
var tag = $element.prop('tagName')
.toLowerCase();
if ($element.prop('value') === this.options.selectAllValue) {
return;
}
......@@ -574,7 +574,7 @@
var $checkboxesNotThis = $('input', this.$container).not($target);
if (isSelectAllOption) {
if (checked) {
this.selectAll(this.options.selectAllJustVisible);
}
......@@ -611,13 +611,13 @@
// Unselect option.
$option.prop('selected', false);
}
// To prevent select all from firing onChange: #575
this.options.onChange($option, checked);
// Do not update select all or optgroups on select all change!
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
......@@ -625,7 +625,7 @@
this.$select.change();
this.updateButtonText();
if(this.options.preventInputChangeEvent) {
return false;
}
......@@ -637,12 +637,12 @@
return false;
}
});
$('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
event.stopPropagation();
var $target = $(event.target);
if (event.shiftKey && this.options.multiple) {
if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
event.preventDefault();
......@@ -654,39 +654,39 @@
if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
var from = $target.closest("li").index();
var to = this.lastToggledInput.closest("li").index();
if (from > to) { // Swap the indices
var tmp = to;
to = from;
from = tmp;
}
// Make sure we grab all elements since slice excludes the last index
++to;
// Change the checkboxes and underlying options
var range = this.$ul.find("li").slice(from, to).find("input");
range.prop('checked', checked);
if (this.options.selectedClass) {
range.closest('li')
.toggleClass(this.options.selectedClass, checked);
}
for (var i = 0, j = range.length; i < j; i++) {
var $checkbox = $(range[i]);
var $option = this.getOptionByValue($checkbox.val());
$option.prop('selected', checked);
}
}
}
// Trigger the select "change" event
$target.trigger("change");
}
// Remembers last clicked option
if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
this.lastToggledInput = $target;
......@@ -739,66 +739,66 @@
event.preventDefault();
}
}, this));
if (this.options.enableClickableOptGroups && this.options.multiple) {
$("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {
event.stopPropagation();
var $target = $(event.target);
var checked = $target.prop('checked') || false;
var $li = $(event.target).closest('li');
var $group = $li.nextUntil("li.multiselect-group")
.not('.multiselect-filter-hidden')
.not('.disabled');
var $inputs = $group.find("input");
var values = [];
var $options = [];
$.each($inputs, $.proxy(function(index, input) {
var value = $(input).val();
var $option = this.getOptionByValue(value);
if (checked) {
$(input).prop('checked', true);
$(input).closest('li')
.addClass(this.options.selectedClass);
$option.prop('selected', true);
}
else {
$(input).prop('checked', false);
$(input).closest('li')
.removeClass(this.options.selectedClass);
$option.prop('selected', false);
}
$options.push(this.getOptionByValue(value));
}, this))
// Cannot use select or deselect here because it would call updateOptGroups again.
this.options.onChange($options, checked);
this.updateButtonText();
this.updateSelectAll();
}, 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) {
var $li = $(event.target).closest('li');
var $inputs = $li.nextUntil("li.multiselect-group")
.not('.multiselect-filter-hidden');
var visible = true;
$inputs.each(function() {
visible = visible && $(this).is(':visible');
visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
});
if (visible) {
$inputs.hide()
.addClass('multiselect-collapsible-hidden');
......@@ -808,7 +808,7 @@
.removeClass('multiselect-collapsible-hidden');
}
}, this));
$("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-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
......@@ -843,14 +843,14 @@
else {
$label.text(" " + label);
}
var $checkbox = $('<input/>').attr('type', inputType);
var name = this.options.checkboxName($element);
if (name) {
$checkbox.attr('name', name);
}
$label.prepend($checkbox);
var selected = $element.prop('selected') || false;
......@@ -898,35 +898,35 @@
*
* @param {jQuery} group
*/
createOptgroup: function(group) {
createOptgroup: function(group) {
var label = $(group).attr("label");
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 classes = this.options.optionClass(group);
$li.addClass(classes);
if (this.options.enableHTML) {
$('label b', $li).html(" " + label);
}
else {
$('label b', $li).text(" " + label);
}
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$('a', $li).append('<span class="caret-container"><b class="caret"></b></span>');
}
if (this.options.enableClickableOptGroups && this.options.multiple) {
$('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
}
if ($(group).is(':disabled')) {
$li.addClass('disabled');
}
this.$ul.append($li);
$("option", group).each($.proxy(function($, group) {
this.createOptionValue(group);
}, this))
......@@ -934,14 +934,14 @@
/**
* Build the select all.
*
*
* Checks if a select all has already been created.
*/
buildSelectAll: function() {
if (typeof this.options.selectAllValue === 'number') {
this.options.selectAllValue = this.options.selectAllValue.toString();
}
var alreadyHasSelectAll = this.hasSelectAll();
if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
......@@ -954,21 +954,21 @@
var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox");
if (this.options.enableHTML) {
$('label', $li).html(" " + this.options.selectAllText);
}
else {
$('label', $li).text(" " + this.options.selectAllText);
}
if (this.options.selectAllName) {
$('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
}
else {
$('label', $li).prepend('<input type="checkbox" />');
}
var $checkbox = $('input', $li);
$checkbox.val(this.options.selectAllValue);
......@@ -995,26 +995,26 @@
this.$filter = $(this.options.templates.filter);
$('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
// Adds optional filter clear button
if(this.options.includeFilterClearBtn) {
var clearBtn = $(this.options.templates.filterClearBtn);
clearBtn.on('click', $.proxy(function(event){
clearTimeout(this.searchTimeout);
this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass('multiselect-filter-hidden');
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, this));
this.$filter.find('.input-group').append(clearBtn);
}
this.$ul.prepend(this.$filter);
this.$filter.val(this.query).on('click', function(event) {
......@@ -1024,7 +1024,7 @@
if (event.which === 13) {
event.preventDefault();
}
// This is useful to catch "keydown" events after the browser has updated the control.
clearTimeout(this.searchTimeout);
......@@ -1073,7 +1073,7 @@
// Toggle current element (group or group item) according to showElement boolean.
$(element).toggle(showElement)
.toggleClass('multiselect-filter-hidden', !showElement);
// Differentiate groups and group items.
if ($(element).hasClass('multiselect-group')) {
// Remember group status.
......@@ -1086,7 +1086,7 @@
$(currentGroup).show()
.removeClass('multiselect-filter-hidden');
}
// Show all group items when group name satisfies filter.
if (!showElement && currentGroupVisible) {
$(element).show()
......@@ -1098,7 +1098,7 @@
}
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
......@@ -1122,7 +1122,7 @@
*/
refresh: function () {
var inputs = $.map($('li input', this.$ul), $);
$('option', this.$select).each($.proxy(function (index, element) {
var $elem = $(element);
var value = $elem.val();
......@@ -1165,7 +1165,7 @@
this.updateButtonText();
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
......@@ -1173,10 +1173,10 @@
/**
* Select all options of the given values.
*
*
* If triggerOnChange is set to true, the on change event is triggered if
* and only if one value is passed.
*
*
* @param {Array} selectValues
* @param {Boolean} triggerOnChange
*/
......@@ -1198,11 +1198,11 @@
if($option === undefined || $checkbox === undefined) {
continue;
}
if (!this.options.multiple) {
this.deselectAll(false);
}
if (this.options.selectedClass) {
$checkbox.closest('li')
.addClass(this.options.selectedClass);
......@@ -1210,7 +1210,7 @@
$checkbox.prop('checked', true);
$option.prop('selected', true);
if (triggerOnChange) {
this.options.onChange($option, true);
}
......@@ -1218,7 +1218,7 @@
this.updateButtonText();
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
......@@ -1231,7 +1231,7 @@
this.deselectAll(false);
this.updateButtonText();
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
......@@ -1239,10 +1239,10 @@
/**
* Deselects all options of the given values.
*
*
* If triggerOnChange is set to true, the on change event is triggered, if
* and only if one value is passed.
*
*
* @param {Array} deselectValues
* @param {Boolean} triggerOnChange
*/
......@@ -1272,7 +1272,7 @@
$checkbox.prop('checked', false);
$option.prop('selected', false);
if (triggerOnChange) {
this.options.onChange($option, false);
}
......@@ -1280,12 +1280,12 @@
this.updateButtonText();
this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
},
/**
* Selects all enabled & visible options.
*
......@@ -1295,15 +1295,15 @@
* @param {Boolean} triggerOnSelectAll
*/
selectAll: function (justVisible, triggerOnSelectAll) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
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');
if(justVisible) {
$('input:enabled' , visibleLis).prop('checked', true);
visibleLis.addClass(this.options.selectedClass);
$('input:enabled' , visibleLis).each($.proxy(function(index, element) {
var value = $(element).val();
var option = this.getOptionByValue(value);
......@@ -1313,20 +1313,20 @@
else {
$('input:enabled' , allLis).prop('checked', true);
allLis.addClass(this.options.selectedClass);
$('input:enabled' , allLis).each($.proxy(function(index, element) {
var value = $(element).val();
var option = this.getOptionByValue(value);
$(option).prop('selected', true);
}, this));
}
$('li input[value="' + this.options.selectAllValue + '"]').prop('checked', true);
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
if (triggerOnSelectAll) {
this.options.onSelectAll();
}
......@@ -1334,21 +1334,21 @@
/**
* Deselects all options.
*
*
* If justVisible is true or not specified, only visible options are deselected.
*
*
* @param {Boolean} justVisible
*/
deselectAll: function (justVisible, triggerOnDeselectAll) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
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');
if(justVisible) {
$('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false);
visibleLis.removeClass(this.options.selectedClass);
$('input[type="checkbox"]:enabled' , visibleLis).each($.proxy(function(index, element) {
var value = $(element).val();
var option = this.getOptionByValue(value);
......@@ -1358,14 +1358,14 @@
else {
$('input[type="checkbox"]:enabled' , allLis).prop('checked', false);
allLis.removeClass(this.options.selectedClass);
$('input[type="checkbox"]:enabled' , allLis).each($.proxy(function(index, element) {
var value = $(element).val();
var option = this.getOptionByValue(value);
$(option).prop('selected', false);
}, this));
}
$('li input[value="' + this.options.selectAllValue + '"]').prop('checked', false);
if (this.options.enableClickableOptGroups && this.options.multiple) {
......@@ -1380,7 +1380,7 @@
/**
* Rebuild the plugin.
*
*
* Rebuilds the dropdown, the filter and the select all option.
*/
rebuild: function() {
......@@ -1395,18 +1395,18 @@
this.updateButtonText();
this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable();
}
else {
this.enable();
}
if (this.options.dropRight) {
this.$ul.addClass('pull-right');
}
......@@ -1416,21 +1416,21 @@
* The provided data will be used to build the dropdown.
*/
dataprovider: function(dataprovider) {
var groupCounter = 0;
var $select = this.$select.empty();
$.each(dataprovider, function (index, option) {
var $tag;
if ($.isArray(option.children)) { // create optiongroup tag
groupCounter++;
$tag = $('<optgroup/>').attr({
label: option.label || 'Group ' + groupCounter,
disabled: !!option.disabled
});
forEach(option.children, function(subOption) { // add children option tags
var attributes = {
value: subOption.value,
......@@ -1439,17 +1439,17 @@
selected: !!subOption.selected,
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) {
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));
});
}
else {
var attributes = {
'value': option.value,
'label': option.label || option.value,
......@@ -1458,19 +1458,19 @@
'selected': !!option.selected,
'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) {
attributes['data-' + key] = option.attributes[key];
}
//Append original attributes + new data attributes to option
$tag = $('<option/>').attr(attributes);
$tag.text(option.label || option.value);
}
$select.append($tag);
});
this.rebuild();
},
......@@ -1519,31 +1519,31 @@
hasSelectAll: function() {
return $('li.multiselect-all', this.$ul).length > 0;
},
/**
* Update opt groups.
*/
updateOptGroups: function() {
var $groups = $('li.multiselect-group', this.$ul)
$groups.each(function() {
var $options = $(this).nextUntil('li.multiselect-group')
.not('.multiselect-filter-hidden')
.not('.disabled');
var checked = true;
$options.each(function() {
var $input = $('input', this);
if (!$input.prop('checked')) {
checked = false;
}
});
$('input', this).prop('checked', checked);
});
},
/**
* Updates the select all checkbox based on the currently displayed and selected checkboxes.
*/
......@@ -1554,7 +1554,7 @@
var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li.multiselect-all", this.$ul);
var selectAllInput = selectAllLi.find("input");
if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
selectAllInput.prop("checked", true);
selectAllLi.addClass(this.options.selectedClass);
......@@ -1577,7 +1577,7 @@
*/
updateButtonText: function() {
var options = this.getSelected();
// First update the displayed button text.
if (this.options.enableHTML) {
$('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
......@@ -1585,7 +1585,7 @@
else {
$('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
}
// Now update the title attribute of the button.
$('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
},
......@@ -1671,7 +1671,7 @@
// Call multiselect method.
if (typeof option === 'string') {
data[option](parameter, extraOptions);
if (option === 'destroy') {
$(this).data('multiselect', false);
}
......
index.html
View file @ 06549a01
......@@ -47,19 +47,19 @@
<div class="page-header">
<h1>Bootstrap Multiselect</h1>
</div>
<p class="alert alert-warning">
<b>Some option names may have changed during the last few commits!</b>
</p>
<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>
</p>
<p class="alert alert-info">
<b>Please have a look at <a href="#how-to-contribute">"How to contribute?"</a>.</b>
</p>
<div class="page-header">
<h2 id="getting-started">Getting Started</h2>
</div>
......@@ -148,11 +148,11 @@
</div>
</li>
</ol>
<div class="page-header">
<h2 id="configuration-options">Configuration Options</h2>
</div>
<table class="table table-condensed">
<thead>
<tr>
......@@ -234,11 +234,11 @@
</tr>
</tbody>
</table>
<p class="alert alert-info">
Use Firebug, Chrome Developer Tools to get the best out of the below examples.
</p>
<table class="table layout-fixed">
<tbody>
<tr>
......@@ -247,7 +247,7 @@
<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.
</p>
<p>
The following example shows the default behavior when the <code>multiple</code> attribute is omitted:
</p>
......@@ -283,11 +283,11 @@
&lt;/select&gt;
</pre>
</div>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -320,11 +320,11 @@
&lt;/select&gt;
</pre>
</div>
<p>
The following example shows the default behavior when the <code>multiple</code> attribute is present. Initially selected options will be adopted automatically:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -356,11 +356,11 @@
&lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</pre>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -399,11 +399,11 @@
&lt;/select&gt;
</pre>
</div>
<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!):
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -539,11 +539,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
Note that this option does also work with disabled options:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -577,11 +577,11 @@
&lt;/script&gt;
</pre>
</div>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -620,11 +620,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
Note that the <code>optgroup</code>'s are automatically selected if a whole group is selected by default:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -670,8 +670,10 @@
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapisbleOptGroups-container" />'
});
$('#example-enableCollapisbleOptGroups-container .caret-container').click();
});
</script>
<select id="example-enableCollapsibleOptGroups" multiple="multiple">
......@@ -698,15 +700,15 @@
&lt;/script&gt;
</pre>
</div>
<p>
Both options, <code>enableCollapsibleOptGroups</code> and <code>enableCollapsibleOptGroups</code>, can also be combined:
</p>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -740,15 +742,57 @@
});
&lt;/script&gt;
</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>
Combining the above with <code>enableFiltering</code> and <code>includeSelectAllOption</code>:
</p>
<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>
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -786,6 +830,7 @@
});
&lt;/script&gt;
</pre>
</div>
</td>
</tr>
<tr>
......@@ -848,11 +893,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -889,11 +934,11 @@
&lt;/select&gt;
</pre>
</div>
<p>
Note that selected options will still be shown:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -977,11 +1022,11 @@
<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>.
</p>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1160,7 +1205,7 @@
<p class="alert alert-warning">
Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1260,7 +1305,7 @@
<p>
A callback called when the dropdown is shown.
</p>
<p class="alert alert-warning">
The <code>onDropdownShow</code> option is not available when using Twitter Bootstrap 2.3.
</p>
......@@ -1309,7 +1354,7 @@
<p class="alert alert-warning">
The <code>onDropdownHide</code> option is not available when using Twitter Bootstrap 2.3.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1354,7 +1399,7 @@
<p class="alert alert-warning">
The <code>onDropdownShown</code> option is not available when using Twitter Bootstrap 2.3.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1399,7 +1444,7 @@
<p class="alert alert-warning">
The <code>onDropdownHidden</code> option is not available when using Twitter Bootstrap 2.3.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1551,11 +1596,11 @@
<p>
The width of the multiselect button may be fixed using this option.
</p>
<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>.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1584,9 +1629,9 @@
&lt;/script&gt;
</pre>
</div>
<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">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1615,11 +1660,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
This does also work for long options:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1895,11 +1940,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
This option may be useful in combination with the <code>includeSelectAllOption</code>:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -1930,11 +1975,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
Note that the <code>allSelectedText</code> is not shown if only one option is available.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2028,7 +2073,7 @@
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-delimiterText').multiselect({
delimiterText '; '
delimiterText '; '
});
});
&lt;/script&gt;
......@@ -2098,7 +2143,7 @@
$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
......@@ -2223,7 +2268,7 @@
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2252,11 +2297,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The <code>includeSelectAllOption</code> option can also be used in combination with <code>optgroup</code>'s.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2289,11 +2334,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
Note that the select all does not trigger the <code>onChange</code> event and only triggers the <code>onSelectAll</code> event:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2328,11 +2373,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The select all element naturally respects disabled elements:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2371,7 +2416,7 @@
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2486,9 +2531,9 @@
&lt;/script&gt;
</pre>
</div>
<p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2692,11 +2737,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The <code>enableFiltering</code> option can easily be used in combination with the <code>includeSelectAllOption</code> option:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -2736,7 +2781,7 @@
&lt;/script&gt;
</pre>
</div>
<p>
The <code>enableFiltering</code> option can also be used in combination with <code>optgroup</code>'s.
</p>
......@@ -2772,7 +2817,7 @@
&lt;/script&gt;
</pre>
</div>
<p>
Clickable <code>optgroup</code>'s are also supported:
</p>
......@@ -2810,7 +2855,7 @@
&lt;/script&gt;
</pre>
</div>
<p>
Finally, the option can also be used together with <code>onChange</code> or similar events:
</p>
......@@ -3105,20 +3150,20 @@
<div class="page-header">
<h2 id="templates">Templates</h2>
</div>
<p>
The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
</p>
<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>,
</p>
<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.
</p>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
......@@ -3136,11 +3181,11 @@
});
&lt;/script&gt;
</pre>
<p>
For example other elements instead of buttons may be used by adapting the template:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -3192,13 +3237,13 @@
&lt;/style&gt;
</pre>
</div>
<div class="page-header">
<h2 id="styling">Styling</h2>
</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>
<pre class="prettyprint linenums">
&lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt;
&lt;!-- Filter --&gt;
......@@ -3244,11 +3289,11 @@
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<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.
</p>
<div class="page-header">
<h2 id="methods">Methods</h2>
</div>
......@@ -3500,11 +3545,11 @@
&lt;/script&gt;
</pre>
</div>
<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.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3550,11 +3595,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually!
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3652,11 +3697,11 @@
&lt;/script&gt;
</pre>
</div>
<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.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3702,11 +3747,11 @@
&lt;/script&gt;
</pre>
</div>
<p>
The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3766,11 +3811,11 @@
<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.
</p>
<p class="alert alert-info">
Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3833,11 +3878,11 @@
<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.
</p>
<p class="alert alert-info">
Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3896,11 +3941,11 @@
<p>
When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
</p>
<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.
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -3912,10 +3957,10 @@
$('#example-updateButtonText-select').on('click', function() {
$('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
$('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
$('input[value="1"]', $('#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="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
});
......@@ -3945,7 +3990,7 @@
$('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('updateButtonText', true);
});
});
......@@ -4205,11 +4250,11 @@
&lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre>
</div>
<p>
The method is also able to handle <code>optgroup</code>'s:
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -4264,11 +4309,11 @@
&lt;select id=&quot;example-dataprovider-optgroups&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre>
</div>
<p>
You can add custom data attributes on option group children and non-grouped options:
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
......@@ -4297,8 +4342,8 @@
});
</script>
<select id="example-dataprovider-data-attributes" multiple="multiple"></select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
......@@ -4353,17 +4398,17 @@
<script type="text/javascript">
$(document).ready(function() {
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#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>
<select id="example-set-all-selected-text" multiple="multiple">
<option value="1" selected>Option 1</option>
</select>
<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"/>
</div>
......@@ -4372,9 +4417,9 @@
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#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;
</pre>
......@@ -4446,7 +4491,7 @@
</div>
<p>
The above approach can also be adapted to be used in
The above approach can also be adapted to be used in
</p>
<div class="example">
......@@ -4495,7 +4540,7 @@
&lt;/script&gt;
</pre>
</div>
<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.
</p>
......@@ -4779,7 +4824,7 @@
<p>
Using a reset button together with a multiselect.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -4836,11 +4881,11 @@
&lt;/form&gt;
</pre>
</div>
<p>
Multiselect can also be used in modals:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -4899,15 +4944,15 @@
&lt;/div&gt;
</pre>
</div>
<p>
An example of using multiselect in an accordion/collapse:
</p>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -4970,7 +5015,7 @@
&lt;/div&gt;
</pre>
</div>
<p>
The examples below are aimed to demonstrate the performance of several features when using a large number of options:
</p>
......@@ -4980,25 +5025,25 @@
<li>Additionally using <code>enableClickableOptGroups</code>.</li>
<li>Resetting the multiselect.</li>
</ul>
<p class="alert alert-warning">
The below examples need to be activated. <b>Note that this may take some time!</b><br>
</p>
<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>
</p>
<div id="example-large-error">
</div>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-large-enable').on('click', function() {
var options = $('#example-large-options').val();
if (options < 1 || options > 5000) {
$('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
}
......@@ -5007,19 +5052,19 @@
$('#example-large-includeSelectAllOption-enableFiltering').html('');
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
$('#example-large-reset').html('');
for (var j = 0; j < options; j++) {
i = j + 1;
$('#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>');
var group = Math.floor(j/10) + 1;
var number = j % 10 + 1;
if (number === 1) {
$('#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-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
}
......@@ -5177,13 +5222,13 @@
&lt;/form&gt;
</pre>
</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 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>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5196,10 +5241,10 @@
value: i + '-' + j
});
}
data.push(group);
}
$('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({
maxHeight: 200
......@@ -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;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre>
<p>
The following example illsutrates how to disable options using JavaScript.
</p>
<div class="example">
<script type="text/javascript">
$(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;
</pre>
<p>
Performance example for using <code>.multiselect('refresh')</code> with 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-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5304,34 +5349,34 @@ $(document).ready(function() {
for (var i = 0; i < 1000; i++) {
$('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
}
$('#example-large-refresh').multiselect();
});
$('#example-large-refresh-refresh').on('click', function() {
$('#example-large-refresh').multiselect('refresh');
});
$('#example-large-refresh-select').on('click', function() {
var count = 0;
$('#example-large-refresh option').each(function() {
var i = $(this).val();
if (i%2 == 0) {
$(this).prop('selected', true);
count++;
}
});
alert('Selected ' + count + ' options!');
});
});
</script>
<div class="btn-group">
<select id="example-large-refresh" multiple="multiple">
</select>
<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>
......@@ -5372,9 +5417,9 @@ $(document).ready(function() {
&lt;/script&gt;
</pre>
</div>
<p>The following example demonstrates how to limit the number of selections of a specific <code>optgroup</code>:</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5382,12 +5427,12 @@ $(document).ready(function() {
onChange: function(options, checked) {
var $option = $(options);
if ($option.length == 1) {
var $group = $option.parent('optgroup')
if ($group.hasClass('group-1')) {
var $options = $('option', $group);
$options = $options.filter(':selected');
if (checked && $options.length > 2) {
alert('Cannot select more than 2 elements in this group!');
$("#example-optgroup-limit").multiselect('deselect', $option.val());
......@@ -5453,20 +5498,20 @@ $(document).ready(function() {
&lt;/div&gt;
</pre>
</div>
<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:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-optgroup-buttonText').multiselect({
buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
......@@ -5474,18 +5519,18 @@ $(document).ready(function() {
else if (options.length === 0) {
return this.nonSelectedText;
}
var $select = $(select);
var $optgroups = $('optgroup', $select);
var delimiter = this.delimiterText;
var text = '';
// Go through groups.
$optgroups.each(function() {
var $selectedOptions = $('option:selected', this);
var $options = $('option', this);
if ($selectedOptions.length == $options.length) {
text += $(this).attr('label') + delimiter;
}
......@@ -5495,12 +5540,12 @@ $(document).ready(function() {
});
}
});
var $remainingOptions = $('option:selected', $select).not('optgroup option');
$remainingOptions.each(function() {
text += $(this).text() + delimiter;
});
return text.substr(0, text.length - 2);
}
});
......@@ -5529,8 +5574,8 @@ $(document).ready(function() {
buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length &gt; 0
&& (this.disableIfEmpty || select.prop('disabled'))
if (this.disabledText.length &gt; 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
......@@ -5586,9 +5631,9 @@ $(document).ready(function() {
&lt;/div&gt;
</pre>
</div>
<p>The following example demonstrates how to set the class of <code>li.active</code>'s parent elements:</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5598,7 +5643,7 @@ $(document).ready(function() {
// Get checkbox corresponding to option:
var value = $(options).val();
var $input = $('#example-selected-parents-container input[value="' + value + '"]');
// Adapt label class:
if (selected) {
$input.closest('label').addClass('active');
......@@ -5665,23 +5710,23 @@ $(document).ready(function() {
&lt;/div&gt;
</pre>
</div>
<div class="page-header">
<h2 id="post">Server-Side Processing</h2>
</div>
<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>.
</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>.
</p>
<p class="alert alert-info">
The plugin naturally supports the <code>required</code> attribute.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5802,15 +5847,15 @@ $(document).ready(function() {
&lt;/form&gt;
</pre>
</div>
<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.
</p>
<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.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
......@@ -5895,11 +5940,11 @@ $(document).ready(function() {
&lt;/form&gt;
</pre>
</div>
<div class="page-header">
<h2 id="keyboard-support">Keyboard Support</h2>
</div>
<table class="table table-striped">
<tbody>
<tr>
......@@ -5916,11 +5961,11 @@ $(document).ready(function() {
</tr>
</tbody>
</table>
<div class="page-header">
<h2 id="faq">Frequently Asked Questions</h2>
</div>
<dl>
<div class="alert alert-info">
<dt id="how-to-contribute">How to contribute?</dt>
......@@ -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>.
</dd>
</div>
<dt>How about older browsers as for example Internet Explorer 6, 7 and 8?</dt>
<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.
</dd>
<dt>May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?</dt>
<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.
</dd>
<dt>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</dt>
<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.
</dd>
<dt>How to change the button class depending on the number of selected options?</dt>
<dd>
This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/332">332</a>.
</dd>
<dt>Why does the plugin crash when using <code>.multiselect('select', value);</code> or <code>.multiselect('deselect', value);</code>?</dt>
<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>.
</dd>
<dt>How to check whether filtering all options resulted no options being displayed (except the select all option)?</dt>
<dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/317">#317</a>.
</dd>
<dt>How to use multiple plugin instances running single selections on one page?</dt>
<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>.
</dd>
<dt>How to use the plugin within a <code>form.form-inline</code>?</dt>
<dd>
This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/322">#322</a>
......@@ -6003,17 +6048,17 @@ $('#example2').multiselect({
});
</pre>
</dd>
<dt>Why does the plugin not work in Chrome for Mobile?</dt>
<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>.
</dd>
<dt>How to underline the searched text when using the filter?</dt>
<dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309">#309</a>.
</dd>
<dt>How to hide the checkboxes?</dt>
<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:
......@@ -6023,7 +6068,7 @@ $('#example2').multiselect({
}
</pre>
</dd>
<dt>How to use Bootstrap Multiselect using <code>$.validate</code>?</dt>
<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:
......@@ -6033,27 +6078,27 @@ var validator = $form.data('validator');
validator.settings.ignore = ':hidden:not(".multiselect")';
</pre>
</dd>
<dt>How to prevent the plugin from selecting the first option in single select mode?</dt>
<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>.
</dd>
<dt>Which are the minimum required components of Twitter Botostrap to get the plugin working?</dt>
<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>.
</dd>
<dt>How to use the <code>.multiselect('dataprovider', data)</code> method?</dt>
<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>.
</dd>
<dt>A <code>type="reset"</code> button does not refresh the multiselect, what to do?</dt>
<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).
</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>
<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>:
......@@ -6066,32 +6111,32 @@ $('.multiselect').multiselect({
</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.
</dd>
<dt>How to avoid <code>TypeError: Cannot read property "toString" of ...</code>?</dt>
<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>.
</dd>
<dt>Why is there no "uncheck all" option?</dt>
<dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
</dd>
<dt>Esc does not close the dropdown?!</dt>
<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.
</dd>
<dt>How to keep the dropdown open?</dt>
<dd>
This issue is discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/426">#426</a>.
</dd>
<dt>Why is the dropdown not showing (or only partly shown) within modals?</dt>
<dd>
This is a general issue not directly related to Bootstrap Multiselect: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/455">#455</a>.
</dd>
<dt>How do add icons to the options (<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/475">#475</a>)?</dt>
<dd>
Adapt the <code>optionLabel</code> option as follows:
......@@ -6101,12 +6146,12 @@ optionLabel: function(element){
},
</pre>
</dd>
<dt>How to add a deselect all functionality (the inverse to the select all option)?</dt>
<dd>
This issue was discussed in the following pull request: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/487">#487</a>.
</dd>
<dt>How to bind object values using Knockout JS?</dt>
<dd>
<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){
</ul>
<p>Any other options inside the multiselect data bind are passed to the jQuery multiselect plugin.</p>
</dd>
<dt>Options do net get updated when using Angular JS?</dt>
<dd>
This issues was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/519">#519</a>.
</dd>
<dt>Is there a search event?</dt>
<dd>
This was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/530">#530</a>.
</dd>
<dt>How to use the plugin with a local jQuery variable?</dt>
<dd>
This was discussed (and solved) here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/686">#686</a>
</dd>
<dt>how to use font-awesome for checkboxes?</dt>
<dd>
This issue was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/576">#576</a>
</dd>
</dl>
<div class="page-header">
<h2 id="known-issues">Known Issues</h2>
</div>
<p>
See the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>
<div class="page-header">
<h2 id="license">License</h2>
</div>
<dl>
<dt>Apache License, Version 2.0</dt>
<dd>
......@@ -6183,7 +6228,7 @@ optionLabel: function(element){
</p>
</dd>
</dl>
<hr>
<p>
&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