17

I am using the bootstrap Multiselect drop-down instead of number of list showing when hit select all option can we show the All Selected text.

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

madth3
  • 7,275
  • 12
  • 50
  • 74
user1121019
  • 231
  • 1
  • 3
  • 11
  • 1
    post some code, what have you tried so far? – Pratik Sep 25 '13 at 12:48
  • 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. – mithataydogmus Sep 25 '13 at 12:48

7 Answers7

34

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.

EricP
  • 3,395
  • 3
  • 33
  • 46
Juliyanage Silva
  • 2,529
  • 1
  • 21
  • 33
  • 1
    I'm glad a I scrolled down, this works perfectly. You can set `noneSelectedText` for each new multiselect object, if you have multiple. Thanks! – Cody Reichert Nov 18 '14 at 20:05
19

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!

Ram
  • 211
  • 2
  • 5
  • 1
    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? – Ekin Sep 22 '15 at 15:31
8

Use init obj options.

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

This option worked for me.

Rhys Bradbury
  • 1,699
  • 13
  • 24
Philip Puthenvila
  • 512
  • 1
  • 8
  • 19
7

use data-placeholder 

<select data-placeholder="Month">

This work for me.

user674690
  • 81
  • 1
  • 2
6

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,
...
}
willy
  • 45
  • 6
Ievgen Baziak
  • 93
  • 1
  • 7
  • 2
    When giving an answer it is preferable to give [some explanation as to WHY your answer](http://stackoverflow.com/help/how-to-answer) is the one. – Stephen Rauch Feb 21 '17 at 01:17
4

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'
    });
});
danlynn
  • 143
  • 1
  • 5
1

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.

mithataydogmus
  • 366
  • 2
  • 11