Select2: программный контроль заполнитель

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

Итак, у меня есть это...

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

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

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

... так что теперь у него есть правильный placeholder.

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

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

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

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

Ответ 1

Обновление

Если вы установили placeholder с помощью атрибута data-placeholder HTML, вам нужно изменить его, а не внутреннюю опцию, поэтому он будет выглядеть как 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.

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

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

Ответ 2

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

<select id="myFoo">

установите его на jQuery

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

затем обновите его следующим образом

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

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

Ответ 3

Чтобы обновить местозаполнитель Select2 с помощью удаленных данных (AJAX/JSONP), используйте этот код:

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

Кредиты на Ответ на запросы.

Ответ 4

Другой способ обновить местозаполнитель - установить атрибут "placeholder" на элементе select и снова вызвать select2():

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

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

Ответ 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 });

Кажется, что он работает каждый раз.

Ответ 6

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

Я придумал новое решение, даже если это взломать. Я храню контейнер select2, чтобы легко получить к нему доступ позже, а затем, когда мне нужно обновить местозаполнитель, я нахожу элемент-заполнитель в контейнере и обновляю его текст:

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