select2: controllo del segnaposto a livello di programmazione

Question

Desidero modificare il segnaposto su un controllo di ottimizzazione select2 su un evento.

Così ho questo ...

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

... che è poi migliorata:

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

... così ora ha il suo corretto segnaposto.

Ma poi voglio che reagire ad un evento e chiaro il segnaposto ...

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

Questo sembra così semplice, eppure io sono perplesso.

Non riesco a trovare nulla nei documenti. Sto guardando nel posto sbagliato?

Answer 1

Un altro modo per aggiornare il segnaposto è quello di impostare l'attributo "placeholder" sull'elemento di selezione, e chiamare select2() di nuovo:

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

Basta ricordare che se hai superato tutte le opzioni per select2 la prima volta , dovrai passarli di nuovo (o semplicemente impostare le opzioni predefinite usando $ .fn.select2.defaults).

Answer 2

Aggiornamento

Se hai impostato segnaposto tramite HTML data-placeholder attributo, è necessario cambiare e non l'opzione interna, in modo da sembrerà come Fabian H. suggerisce:

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

O se no, utilizzare un'opzione interna select2.opts.placeholder:

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

Questo non è perfetto, naturalmente, ma molto meglio dell'hacking di HTML generato da select2.

1. this.$select.data("select2") si ottiene l'oggetto Select2 interna, in modo da ottenere l'accesso alle sue proprietà e metodi (non solo a quelli esportati per l'utilizzo al di fuori)
2. Successivo sto aggiornando l'opzione interna placeholder o cambiare il relativo attributo dati
3. Infine, sto attivando il metodo interno setPlaceholder che imposta il nuovo segnaposto.

Spero che questo aiuti!

Answer 3

Per aggiornare il segnaposto di un Select2 con dati remoti (AJAX/JSONP) utilizzare questo codice:

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

Considerazioni a Brocks response.

Answer 4

se si desidera modificare dinamicamente il segnaposto, non appoggiarla su HTML

<select id="myFoo"> 

impostato su jQuery

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

quindi aggiornarla come questo

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

funziona per me, spero che aiuti.

Answer 5

Credo che il comportamento dipenderà dalla versione di Select2 che si sta utilizzando - stiamo usando la v3.5.1 - ma ho dovuto adottare un approccio leggermente diverso per far cambiare il segnaposto su richiesta. Nel mio caso, il selettore cambia le opzioni presentate in base al valore di un altro selettore, il che significa che il segnaposto deve cambiare con il nuovo set di dati.

Per ottenere questo lavoro, ho dovuto togliere tutti i riferimenti a un segnaposto nell'elemento input HTML.

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

Poi, nel Javascript, ogni volta che ho caricato l'elemento con le opzioni corrette, ho dovuto aggiornare il segnaposto tramite la funzione data():

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

che sembra funzionare ogni volta ora.

Answer 6

sto usando Select2 4.0.5 standard e le soluzioni esistenti o non ha funzionato per me o richiesto ricreare il select2 per ogni aggiornamento segnaposto, che volevo evitare.

mi è venuta una nuova soluzione, anche se si tratta di un hack. I memorizzare il contenitore select2 di accedere facilmente in un secondo momento, poi, quando ho bisogno di aggiornare il segnaposto trovo l'elemento segnaposto all'interno del contenitore e aggiornare il suo testo:

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