How to change the Bootstrap Multiselect label instead of selected all?

Question

I am using the Bootstrap Multiselect drop-down. Instead of the number of items shown when hit "Select All" option, can we show the "All Selected" text?

http://davidstutz.github.io/bootstrap-multiselect/

Cosmopolite

post some code, what have you tried so far? – Wismar

I tried to debug but it seems it uses direclty jquery.js. There isn't looking like custom content. It looks wrong but weird. If you can figure it out before 3 selections, you can extend it to 4,5,6 of course. – Viv

Answer 1

If someone hit this question in the future , solution is change the

{ nonSelectedText: 'None selected' }  

assign a global variable to this text change it through JavaScript.

value resides in bootstrap-multiselect.js file.

Reflexion

I'm glad a I scrolled down, this works perfectly. You can set noneSelectedText for each new multiselect object, if you have multiple. Thanks! – Velvetvelveteen

Answer 2

You can change "Label" (of bootstrap multiselect) text for all 4 cases "none selected", "n selected", "All" Selected or "selected values" as follows:

JQuery

$('#level').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: 150,
    numberDisplayed: 2,
    nSelectedText: 'selected',
    nonSelectedText: 'None selected',
    buttonText: function(options, select) {
      var numberOfOptions = $(this).children('option').length;
      if (options.length === 0) {
         return nonSelectedText + ' <b class="caret"></b>';
      }
      else{
             if (options.length > numberDisplayed) {
                 if(options.length === numberOfOptions){
                     return ' All Selected' + ' <b class="caret"></b>';
                 }
                 return options.length + ' ' + nSelectedText + ' <b class="caret"></b>';
             }else {
                 var selected = '';
                 options.each(function() {
                    var label = ($(this).attr('label') !== undefined) ?  
                                                       $(this).attr('label'):$(this).html();
                    selected += label + ', ';
                 });
                 return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
             }
       }
    }
});

HTML

<select multiple="multiple" id="level">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

It works for me. Have fun!

Glisson

Somehow the all selected part does not work for me and fall into the nSelected part... Basically the options.length === numberOfOptions does not work as it should, I don't know what can be wrong.. Do you have any suggestion? – Unicameral

Answer 3

Use init obj options.

$("#services").multiselect({
  nonSelectedText:'Services'
});

This option worked for me.

Benedick

There's a typo, the property is called nonSelectedText – Di

Answer 4

use data-placeholder

<select data-placeholder="Month">

This work for me.

Moonwort

Doesn't seem to be working at all. Which version are you using? – Phenosafranine

Works on 1.1.2 at least. – Ulises

Answer 5

Following the official documentation:

allSelectedText is the text displayed if all options are selected. You can disable displaying the allSelectedText by setting it to false.

use option

{
...
allSelectedText: false,
...
}

Leucocytosis

When giving an answer it is preferable to give some explanation as to WHY your answer is the one. – Octavo

Answer 6

Philip's answer worked for me, but just making it a bit more complete, it should be called upon document ready. So the solution for me, including setting multiple lists was:

$(document).ready(function() {
    $("#bedrooms").multiselect({
        nonSelectedText:'Bedrooms'
    });
    $("#bathrooms").multiselect({
        nonSelectedText:'Bathrooms'
    });
    $("#garages").multiselect({
        nonSelectedText:'Garages'
    });
    $("#livingareas").multiselect({
        nonSelectedText:'Living Areas'
    });
});

Seligmann

Answer 7

I changed 3rd button's (hint of button : Multiselect with a 'Select all' option) id to test. It works but you need to add id to button from developer tools (Chrome / Firefox add F12) first.

$('#test+ul>li').change(function(){
    $('#test').text($('#test').attr('title'));
});

You can test it after you added the id. Please use jsfiddle.net after that. You may find help more quickly.

Viv