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>

      

+3


source to share


2 answers


I fixed this using the following found in the documentation.

numberDisplayed: 1



   $(document).ready(function() {
        $('#multiselect').multiselect({
            allSelectedText: 'All', 
            numberDisplayed: 1,
            buttonWidth: '100%',
            includeSelectAllOption: true,
        });
    });

      

+2


source


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.

0


source







All Articles