select2: programowo kontrolujący obiekt zastępczy

Question

Chcę zmienić obiekt zastępczy na kontroli wzmocnienia select2 po zdarzeniu.

Więc mam to ...

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

... który jest następnie wzmocniony:

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

... więc teraz ma swoją prawidłową zastępczy.

Ale chcę go do reagowania na zdarzenia i wyczyścić zastępczy ...

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

To wydaje się tak prosty, ale jestem zakłopotany.

Nie mogę znaleźć niczego w dokumentach. Czy szukam w niewłaściwym miejscu?

Answer 1

Innym sposobem, aby zaktualizować zastępczy jest ustawienie „zastępczy” atrybut select elementu, i nazywają select2() ponownie:

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

Wystarczy pamiętać, że jeśli przeszły wszelkie opcje select2 po raz pierwszy , będziesz musiał przekazać je ponownie (lub po prostu ustawić domyślne opcje za pomocą $ .fn.select2.defaults).

Answer 2

Aktualizacja

Jeśli ustawiony zastępczy poprzez HTML data-placeholder atrybutu, trzeba go zmienić, a nie opcja wewnętrzny, więc będzie to wyglądało jak Fabian H. proponuje:

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

Lub jeśli nie, użyj opcji wewnętrznej: select2.opts.placeholder:

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

To nie jest oczywiście perfekcyjnie, ale znacznie lepiej niż hackowanie generowanego HTML select2.

1. this.$select.data("select2") dostaje wewnętrznego obiektu select2, więc można uzyskać dostęp do jego właściwości i metod (nie tylko dla tych, eksportowane do użytku z zewnątrz)
2. Następny ja aktualizowania opcję wewnętrznego placeholder lub zmianę powiązany atrybut danych
3. W końcu uruchamiam wewnętrzną metodę setPlaceholder, która ustawia nowego placeholera.

Mam nadzieję, że pomoże!

Answer 3

Aby zaktualizować zastępczy o Select2 ze zdalnych danych (AJAX/jsonp) użyć tego kodu:

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

kredytów Brocks response.

Answer 4

jeśli chcesz dynamicznie zmieniać zastępczy, nie należy ustawiać go na HTML

<select id="myFoo"> 

ustawić go na jQuery

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

następnie zaktualizować go jak ten

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

to działa dla mnie, mam nadzieję, że pomaga.

Answer 5

Uważam, że zachowanie będzie zależało od używanej wersji Select2 - używamy v3.5.1 - ale musiałem przyjąć nieco inne podejście, aby zmiennik zastępczy zmienić na żądanie. W moim przypadku selektor zmienia opcje przedstawione na podstawie wartości innego selektora, co oznacza, że ​​symbol zastępczy musi zostać zmieniony przy użyciu nowego zestawu danych.

Aby to działało, musiałem usunąć wszelkie odniesienia do elementu zastępczego w elemencie wejściowym HTML.

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

Następnie w JavaScript, ilekroć ładowany element z odpowiednimi opcjami, musiałem zaktualizować zastępczy za pośrednictwem funkcji data():

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

, który wydaje się działać za każdym razem, teraz.

Answer 6

Używam Select2 4.0.5 Standard i istniejące rozwiązania albo nie działały dla mnie, albo wymagały odtworzenia selekcji2 dla każdej aktualizacji zastępczej, której chciałem uniknąć.

Wymyśliłem nowe rozwiązanie, nawet jeśli jest to włamanie. Przechowywać pojemnik select2 łatwy dostęp później, wtedy kiedy trzeba aktualizować zastępczy znajdę element zastępczy w pojemniku i aktualizować swój tekst:

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