Очистить выпадающее меню с помощью jQuery Select2

Я пытаюсь программно очистить раскрывающийся список, используя фантастическую библиотеку Select2. Выпадающий динамически заполняется удаленным вызовом ajax с помощью опции Select2 query.

HTML:

<input id="remote" type="hidden" data-placeholder="Choose Something" />

JavaScript:

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

К сожалению, вызов $remove.select2('val', '') вызывает следующее исключение:

 Uncaught Error: cannot call val() if initSelection() is not defined

Я попытался установить attr, установив val, text и функцию Select2 specific data. Кажется, он не может сделать парня ясным и работать в такой же форме. Кто-нибудь получил предложения?

Ответ 1

Это работает для меня:

 $remote.select2('data', {id: null, text: null})

Он также работает с проверкой jQuery, когда вы очищаете его таким образом.

- редактировать 2013-04-09

На момент написания этого ответа это был единственный способ. С недавними исправлениями теперь доступен правильный и лучший способ.

$remote.select2('data', null)

Ответ 2

В случае Select2 Version 4 +

он изменил синтаксис, и вам нужно написать вот так:

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});

Ответ 3

Это правильный, select2 очистит выбранное значение и покажет заполнитель.

$remote.select2('data', null)

Ответ 4

Используя select2 version 4, вы можете использовать эту короткую нотацию:

$('#remote').html('').select2({data: {id:null, text: null}});

Это передает json-массив с нулевым идентификатором и текстом в select2 при создании, но сначала с .html('') удаляет ранее сохраненные результаты.

Ответ 5

Для select2 версии 4 легко используйте это:

$('#remote').empty();

После заполнения элемента select с помощью ajax-вызова вам может понадобиться эта строка кода в разделе успеха для обновления содержимого:

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                }

Ответ 6

Вы должны использовать этот:

   $('#remote').val(null).trigger("change");

Ответ 7

Предложенный метод @Lelio Faieta работает для меня, но поскольку я использую тему начальной загрузки, он удаляет все настройки начальной загрузки для select2. Поэтому я использовал следующий код:

$("#remote option").remove();

Ответ 8

Я немного опаздываю, но это то, что работает в последней версии (4.0.3):

$('#select_id').val('').trigger('change');

Ответ 9

Эти обе работают для меня, чтобы очистить выпадающий список:

.select2('data', null)
.select2('val', null)

Но важно отметить: значение не получает reset,.val() вернет первый вариант, даже если он не выбран. Я использую Select2 3.5.3

Ответ 10

Я нашел ответ (комплименты user780178), который я искал в этом другом вопросе:

Reset выберите значение2 и покажите placeholdler

$("#customers_select").select2("val", "");

Ответ 11

От > 4.0, чтобы действительно очистить select2, вам нужно сделать следующее:

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

Обратите внимание, что мы выбираем select2 на основе исходного вопроса. В вашем случае, скорее всего, вы выберете select2 по-другому.

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

Ответ 12

Так как ни один из них не работал у меня (select2 4.0.3), он выбрал путь std.

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);

Ответ 13

Вы можете использовать это или обратиться к этому https://select2.org/programmatic-control/add-select-clear-items

$('#mySelect2').val(null).trigger('change');

Ответ 14

Это решило мою проблему в версии 3.5.2.

$remote.empty().append(new Option()).trigger('change');

В соответствии с этой проблемой вам понадобится пустая опция внутри тега select для отображения заполнителя.

Ответ 15

Вот как я это делаю:

$('#my_input').select2('destroy').val('').select2();