Bootstrap Multiselect Plugin shows "all selected"
I am using plugstrap for David Stutz Multi-select, I am having problems displaying "all selected". Using the allSelectedText method works, but it is overridden when using the "allSelectedText" callback.
Using the previous question, I tried to grab the number of children and check if they are all selected (see comments)
Note. This works if I remove the 'numberofOptions'
Using callText callback / allSelectedText method, here's a link to the documentation - http://davidstutz.github.io/bootstrap-multiselect/
Your input is appreciated.
Js
$(document).ready(function() {
$('#multiselect').multiselect({
//Following line is being overridden by the numberOfOptions
allSelectedText: 'All Selected',
buttonText: function(options, select) {
//grab the number of childeren to later return 'all selected'
var numberOfOptions = $(this).children('option').length;
if (options.length === 0) {
return 'Select';
}
else if (options.length > 1) {
return '1+ Selected';
}
//This line is calculating number of options,
//displaying 'AllSelected in the label'
else if (options.length === numberOfOptions) {
return 'AllSelected';
}
else {
var labels = [];
options.each(function() {
if ($(this).attr('label') !== undefined) {
labels.push($(this).attr('label'));
}
else {
labels.push($(this).html());
}
});
return labels.join(', ') + '';
}
},
buttonWidth: '100%',
includeSelectAllOption: true,
});
});
Html
<select id="multiselect" multiple="multiple">
<option value="x">XYZ</option>
<option value="x">XYZ</option>
<option value="x">XYZ</option>
<option value="x">XYZ</option>
<option value="x">XYZ</option>
</select>
source to share
Your code never reaches
else if (options.length === numberOfOptions)
because
else if (options.length > 1)
already covers almost all possible remaining cases (except options.length === 1
).
Also allSelectedText
used buttonText
by default callback . If you overwrite it and don't use text allSelectedText
in your code, then that text is not displayed.
source to share