Wie ändert man die Bootstrap-Multiselect-Label statt alle ausgewählten?

Question

Ich benutze das Bootstrap-Multiselect-Drop-Down-Menü anstelle der Anzahl der angezeigten Listen, wenn alle Optionen ausgewählt sind, können wir den All Selected-Text anzeigen.

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

Answer 1

I 3. Taste s geändert (Hauch Taste: Mehrfachauswahl mit einer Option 'Alle auswählen') ID Test. Es funktioniert, aber Sie müssen zuerst die ID zur Schaltfläche aus den Entwicklertools hinzufügen (Chrome/Firefox F12 hinzufügen).

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

Sie können es testen, nachdem Sie die ID hinzugefügt haben. Bitte benutze danach jsfiddle.net. Sie können schneller Hilfe finden.

Answer 2

Wenn jemand diese Frage in Zukunft treffen, ist die Lösung

ändern

{ nonSelectedText: 'None selected' } 

eine globale Variable zu diesem Text zuweisen es durch JavaScript ändern.

Wert befindet sich in bootstrap-multiselect.js Datei.

Answer 3

Sie können "Label" ändern (von Bootstrap-Multiselect) Text für alle 4 Fälle "keine Angabe", "n ausgewählt", "Alle" Ausgewählten oder "ausgewählte Werte" wie folgt:

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> 

Es funktioniert für mich. Habe Spaß!

Answer 4

Verwenden Sie init obj Optionen.

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

Diese Option funktionierte für mich.

Answer 5

Verwendung Daten-Platzhalter

<select data-placeholder="Month"> 

für mich Diese Arbeit.

Answer 6

Philipps Antwort funktionierte für mich, aber nur um es ein wenig vollständiger zu machen, sollte es auf Dokument bereit sein. So ist die Lösung für mich, einschließlich der Einrichtung mehrere Listen war:

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

Answer 7

die official documentation Folgende:

allSelectedText der Text, wenn alle Optionen ausgewählt angezeigt wird, sind. Sie können die allSelectedText Anzeige deaktivieren, indem Sie es auf false setzen.

Verwendung Option

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