select2: программно управляющий заполнитель

Question

Я хочу изменить местозаполнитель на элементе управления select2 при событии.

Так что у меня есть это ...

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

... который затем усиливается:

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

... так что теперь он имеет правильный заполнитель.

Но я хочу, чтобы реагировать на событие и очистить заполнитель ...

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

Это кажется настолько простым, но я тупик.

Я не могу найти что-либо в документах. Я ищу не в том месте?

Answer 1

Другой способ обновить заполнитель, чтобы установить «заполнитель» атрибут выбора элемента и вызовите ВЫБ.2() еще раз:

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

Просто помните, что если вы прошли какие-либо варианты ВЫБ.2 в первый раз , вам нужно будет передать их снова (или просто настроить параметры по умолчанию, используя $ .fn.select2.defaults).

Answer 2

Update

Если вы установили заполнитель через HTML data-placeholder атрибут, вам необходимо изменить его, а не внутренний вариант, так что она будет выглядеть, как Fabian H. предлагает:

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

Или если не используйте внутренний вариант select2.opts.placeholder:

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

Это не конечно, но лучше, чем взломать сгенерированный HTML2.

1. this.$select.data("select2") получает вас внутренний объект ВЫБ.2, так что вы получите доступ к его свойствам и методам (не только экспортируемые для использования снаружи)
2. Далее я обновляю внутренний вариант placeholder или изменить связанный с ним атрибут данных
3. Наконец-то я запускаю внутренний метод setPlaceholder, который устанавливает новый прожектор.

Надеюсь, что это поможет!

Answer 3

Чтобы обновить заполнитель из более выбор2 с удаленными данными (AJAX/JSONP) использовать этот код:

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

кредитов на Brocks response.

Answer 4

, если вы хотите, чтобы динамически изменять заполнитель, не устанавливайте его на HTML

<select id="myFoo"> 

установить его на JQuery

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

затем обновить его, как этот

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

это работает для меня, надеюсь, что это поможет.

Answer 5

Я считаю, что поведение будет зависеть от того, какую версию Select2 вы используете, - мы используем v3.5.1, - но мне пришлось немного по-разному подойти, чтобы получить замену заполнителя по требованию. В моем случае селектор изменяет параметры, представленные на основе значения другого селектора, что означает, что местозаполнитель должен измениться с помощью нового набора данных.

Чтобы заставить это работать, мне пришлось удалить любые ссылки на placeholder в элементе ввода HTML.

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

Тогда, в Javascript, всякий раз, когда я загрузил элемент с нужными параметрами, я должен был обновить заполнитель с помощью функции data():

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

Это, кажется, работает каждый раз, когда в настоящее время.

Answer 6

Я использую Select2 4.0.5. Стандартные и существующие решения либо не работают для меня, либо требуют повторного создания select2 для каждого обновления заполнителя, чего я хотел избежать.

Я придумал новое решение, даже если это взломать. Хранить контейнер ВЫБ.2 легко получить доступ к нему позже, а затем, когда мне нужно обновить заполнитель я найти элемент-заполнитель внутри контейнера и обновить его текст:

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