Очистить раскрывающийся список с помощью jQuery Select2
Я пытаюсь программно очистить выпадающее меню, используя фантастический Select2 библиотека. Выпадающее меню динамически заполняется удаленным вызовом ajax с помощью Select2 .
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 конкретные data функция. Кажется, не может сделать парня ясным и работать в режиме радиокнопки. У кого-нибудь есть предложения?
14 ответов
это работает для меня:
$remote.select2('data', {id: null, text: null})
Он также работает с jQuery validate, когда вы очищаете его таким образом.
-- edit 2013-04-09
на момент написания этого ответа, это был единственный способ. С недавними патчами теперь доступен правильный и лучший способ.
$remote.select2('data', null)
в случае Select2 версии 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'}]});
Это правильный, select2 очистит выбранное значение и покажет заполнитель обратно .
$remote.select2('data', null)
используя select2 версии 4 Вы можете использовать эту короткую нотацию:
$('#remote').html('').select2({data: {id:null, text: null}});
Это передает массив json с нулевым идентификатором и текстом в select2 при создании, но сначала с .html('') удаляет ранее сохраненные результаты.
для select2 версии 4 легко использовать это:
$('#remote').empty();
после заполнения элемента select вызовом ajax вам может понадобиться эта строка кода в разделе success для обновления содержимого:
success: function(data, textStatus, jqXHR){
$('#remote').change();
}
предлагаемый метод @Lelio Faieta работает для меня, но потому что я использую тема на Bootstrap, Он удаляет все настройки начальной загрузки для select2. Поэтому я использовал следующий код:
$("#remote option").remove();
Я немного опоздал, но это то, что работает в последней версии (4.0.3):
$('#select_id').val('').trigger('change');
эти оба работают для меня, чтобы очистить меню:
.select2('data', null)
.select2('val', null)
но важное примечание: значение не сбрасывается .функция val() вернет первый вариант, даже если он не выбран. Я использую Select2 3.5.3
Я нашел ответ (уважение user780178) Я искал в этом другой вопрос:
сбросить select2 значение и показать placeholdler
$("#customers_select").select2("val", "");
С >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 по-другому.
надеюсь, что это помогает.
поскольку ни один из них не работал для меня (select2 4.0.3), пошел путь выбора std.
for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
selectbox.remove(i);
вы можете использовать это или ссылаться далее на этоhttps://select2.org/programmatic-control/add-select-clear-items
$('#mySelect2').val(null).trigger('change');