select2: programmgesteuerter Steuerplatzhalter

Question

Ich möchte den Platzhalter auf einem Steuerelement select2 bei einem Ereignis ändern.

Also habe ich diese bekam ...

<select id="myFoo" placeholder="Fight some foo..."> 

... die dann verstärkt wird:

init: function(){ 
    $('#myFoo').select2(); 
}, 

... so jetzt hat es seinen richtigen Platzhalter.

Aber dann will ich es auf ein Ereignis reagieren und den Platzhalter löschen ...

someButtonPress: function(){ 
// $('#myFoo').placeholder(""); 
// $('#myFoo').attr('placeholder', ""); 
// $('#myFoo').select2('placeholder',""); 
// $('#myFoo').select2({placeholder:""}); 
// none of these work 
} 

Dies scheint so einfach, aber ich bin ratlos.

Ich kann nichts in den Dokumenten finden. Sehe ich an der falschen Stelle?

Answer 1

Eine weitere Möglichkeit, den Platzhalter zu aktualisieren ist die „Platzhalter“ Attribut für das select-Element zu setzen und rufen select2() erneut:

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2(); 

Denken Sie daran, dass, wenn Sie alle Optionen übergeben das erste Mal Select2 Sie müssen sie erneut eingeben (oder richten Sie einfach die Standardoptionen mit $ .fn.select2.defaults ein).

Answer 2

aktualisieren

Wenn Sie Platzhalter über HTML data-placeholder Attribut gesetzt haben, müssen Sie es ändern und nicht die interne Option, so dass es aussieht wie Fabian H. schlägt vor:

$select.attr("data-placeholder", "New placeholder text"); 
$select.data("select2").setPlaceholder(); 

Oder wenn verwenden Sie nicht, eine interne Option select2.opts.placeholder:

var select2 = $select.data("select2"); 
select2.opts.placeholder = "New placeholder text"; 
select2.setPlaceholder(); 

Dies ist nicht natürlich perfekt, aber viel besser als das hacken von selected2 generiertem HTML.

1. this.$select.data("select2") bekommt man die interne select2 Objekt, so dass Sie Zugriff auf seine Eigenschaften und Methoden erhalten (nicht nur für diejenigen, für die Verwendung von außen exportiert)
2. Next ich die placeholder interne Option bin zu aktualisieren oder die damit verbundene Veränderung Datenattribut
3. Schließlich trigger ich interne Methode setPlaceholder, die den neuen placeholer setzt.

Hoffe, dass hilft!

Answer 3

Um den Platzhalter eines Select2 aktualisieren mit Remote-Daten (AJAX/JSONP) Verwenden Sie diesen Code:

$input = $("input#e7"); 
$input.attr("data-placeholder", "New placeholder"); 
var select2 = $input.data("select2"); 
select2.setPlaceholder(); 

Credits Brocks response.

Answer 4

wenn Sie möchten, um dynamisch den Platzhalter ändern, stellen Sie es nicht auf HTML

<select id="myFoo"> 

Set es auf jQuery

$('#myFoo').select2({ 
    placeholder: "your placeholder" 
}); 

dann aktualisieren, es wie dieses

someButtonPress: function(){ 
$('#myFoo').select2({ 
    placeholder: "change your placeholder" 
    }); 
} 

es funktioniert für mich, hoffe es hilft.

Answer 5

Ich glaube, das Verhalten hängt davon ab, welche Version von Select2 Sie verwenden - wir verwenden v3.5.1 - aber ich musste einen etwas anderen Ansatz wählen, um den Platzhalter bei Bedarf zu ändern. In meinem Fall ändert der Selektor die dargestellten Optionen basierend auf dem Wert eines anderen Selektors, was bedeutet, dass der Platzhalter mit dem neuen Datensatz geändert werden muss.

Um dies zu arbeiten, musste ich alle Verweise auf einen Platzhalter im HTML-Eingabeelement entfernen.

<input type="text" class="form-control span10"> 

Dann wird in der Javascript, wenn ich das Element mit den richtigen Optionen geladen, hatte ich den Platzhalter über die data() Funktion zu aktualisieren:

selector.data('placeholder', placeholder); 
selector.select2({ data: new_data_set, tags: true }); 

Das scheint jetzt jedes Mal zu arbeiten.

Answer 6

Ich verwende Select2 4.0.5 Standard und die vorhandenen Lösungen funktionierten entweder nicht für mich oder erforderten die Neuerstellung von select2 für jedes Platzhalter-Update, das ich vermeiden wollte.

Ich kam eine neue Lösung, auch wenn es ein Hack ist. Ich speichere die select2 Behälter, um es später leicht zugreifen, dann, wenn ich brauche den Platzhalter ich innerhalb des Behälters den Platzhalter Element finden zu aktualisieren und seinen Text aktualisieren:

var selectorSelect2 = $('#selector').data('select2').$container; 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1'); 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');