Boostrap Multiselect remove “All Selected” and actually show all selected

Question

I'm using the Bootstrap Multiselect jquery plugin. My problem is, if the user selects all options, I want it to actually display all the selections like this

Cheese, Tomatoes, Mozzarella, Mushrooms, Pepperoni, Onions

Instead, once I select the 6th option, it displays this

All Selected (6)

Here's my code

<select id="example-numberDisplayed" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

and

$(document).ready(function() {

    $('#example-numberDisplayed').multiselect({
    numberDisplayed: 6
    });
});

Any help would be appreciated. Thanks in advance

Answer 1

For achieving this you should modify the code in java script file of multi select ie bootstrap-multiselect.js, i do not know it is permitted or not as it is licensed. But if you comment or remove the following code in buttonText function, it will not display all selected in any situation.

else if (this.allSelectedText 
                    && options.length === $('option', $(select)).length 
                    && $('option', $(select)).length !== 1 
                    && this.multiple) {

                if (this.selectAllNumber) {
                    return this.allSelectedText + ' (' + options.length + ')';
                }
                else {
                    return this.allSelectedText;
                }
            }