Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the bootstrap multiselect label instead of selected all?

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/

like image 388
user1121019 Avatar asked Sep 25 '13 12:09

user1121019


People also ask

How do I reset multiselect?

If an option is selected from dropdown1, then deselect/reset everything in dropdown2. If an option is selected from dropdown2, then deselect/reset everything in dropdown1. $("#dropdown1"). change(function () { $('#dropdown2').

How do I disable multiselect?

multiselect('disable'); will disable the selector (stored in the variable $widget ). And by replacing disable with enable you can enable it. So just run the function with the correct disable/enable setting and you can do it based on any condition.

What is bootstrap multiselect?

Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select. Its implementation is quite simple, and in exchange brings a lot of UX value. Examples of Bootstrap Multiselect use: Ingredient choice within a pizza delivery system.

What is multi select dropdown?

HTML MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options. It has several out-of-the-box features such as data binding, filtering, grouping, tagging with custom values, and checkbox mode.


2 Answers

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.

like image 191
Juliyanage Silva Avatar answered Sep 18 '22 03:09

Juliyanage Silva


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!

like image 45
Ram Avatar answered Sep 21 '22 03:09

Ram