Сброс значения Select2 в выпадающем списке с помощью кнопки сброса
каков был бы лучший способ сбросить выбранный элемент по умолчанию? Я использую Select2 библиотеки и при использовании обычной кнопки type="reset"
значение в выпадающем списке не сбрасывается.
поэтому, когда я нажимаю кнопку, Я хочу, чтобы" все " было показано снова.
jQuery
$("#d").select2();
html
<select id="d" name="d">
<option selected disabled>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
14 ответов:
Я бы попробовал что-то вроде этого:
$(function(){ $("#searchclear").click(function(){ $("#d").select2('val', 'All'); }); });
вы также можете сбросить значение select2 с помощью
$(function() { $('#d').select2('data', null) })
также вы можете пройти
'allowClear': true
при вызове select2 и он будет иметь кнопку X, чтобы сбросить его значение.
согласно последней версии (select2 3.4.5) документально здесь, это будет так:
$("#my_select").select2("val", "");
версия 4.0
$('#d').val('').trigger('change');
это правильное решение отныне в соответствии с устаревшим сообщением, брошенным в режиме отладки: - Это
select2("val")
метод устарел и будет удален в более поздних версиях Select2. Используйте$element.val()
вместо"
вы можете использовать:
$("#d").val(null).trigger("change");
это очень просто и работает правильно! Если использовать с кнопкой сброса:
$('#btnReset').click(function() { $("#d").val(null).trigger("change"); });
лучший способ сделать это:
$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID $('#e1').append(new Option()); // to add the placeholder and the allow clear
Я вижу три проблемы:
- отображение элемента управления Select2 не обновляется при изменении его значения из-за сброса формы.
- опция "Все" не имеет .
- опция "Все" отключена.
во-первых, я рекомендую вам использовать
setTimeout
функции, чтобы гарантировать, что код выполняется после того, как форма восстановления.вы можете выполнить код, когда кнопка нажал:
$('#searchclear').click(function() { setTimeout(function() { // Code goes here. }, 0); });
или когда форма сбрасывается:
$('form').on('reset', function() { setTimeout(function() { // Code goes here. }, 0); });
что касается того, какой код использовать:
поскольку опция " Все " отключена, сброс формы не делает ее выбранным значением. Поэтому вы должны явно установить его в качестве выбранного значения. Способ сделать это-с помощью функции Select2 "val". И поскольку "все" не было!--6--> атрибут, его значение совпадает с его текстом, который является "все". Поэтому, вы должны используйте код, заданный thtsigma в выбранном ответе:
$("#d").select2('val', 'All');
если атрибут
value=""
должны были быть добавлены к опции "все", то вы могли бы использовать код, данный Даниэль Денер:$("#d").select2('val', '');
если опция " Все " не была отключена, то вам просто нужно будет заставить Select2 обновиться, и в этом случае вы можете использовать:
$('#d').change();
Примечание: следующий код от Lenart-это способ очистить выбор, но он не вызывает опцию "Все выбрано:
$('#d').select2('data', null)
Если у вас есть заполненный виджет выбора, например:
<select> <option value="1">one</option> <option value="2" selected="selected">two</option> <option value="3">three</option> ...
вы хотите убедить select2 восстановить первоначально выбранное значение при сбросе, аналогично тому, как работает собственная форма. Для этого сначала сбросьте собственную форму, а затем обновите select2:
$('button[type="reset"]').click(function(event) { // Make sure we reset the native form first event.preventDefault(); $(this).closest('form').get(0).reset(); // And then update select2 to match $('#d').select2('val', $('#d').find(':selected').val()); }
то, что я нашел хорошо работает следующим образом:
Если у вас есть параметр-заполнитель, например " все " или " - Select -", и его первый вариант, и это то, что вы хотите установить значение при "сбросе", вы можете использовать
$('#id').select2('val',0);
0-это по существу вариант,который вы хотите установить на сброс. Если вы хотите установить его на последний вариант, то получите длину опций и установите ее на эту длину - 1. В основном используйте индекс любого параметра, который вы хотите установить значение select2 в on сброс.
Если у вас нет заполнителя и вы просто не хотите, чтобы текст появлялся в поле, используйте:
$('#id').select2('val','');
для достижения общего решения, почему бы не сделать это:
$(':reset').live('click', function(){ var $r = $(this); setTimeout(function(){ $r.closest('form').find('.select2-offscreen').trigger('change'); }, 10); });
таким образом: Вам не придется создавать новую логику для каждого select2 в вашем приложении.
и вам не нужно знать значение по умолчанию (которое, кстати, не должно быть
""
или даже первый вариант)наконец, установите значение
:selected
не всегда будет достигнут истинный сброс, так как текущий избранные вполне могли быть установлены программно на клиент, в то время как действие по умолчаниюform select
- это возврат значений входных элементов на отправленные сервером.EDIT: Кроме того, учитывая устаревший статус
live
, мы могли бы заменить первую строку на это:$('form:has(:reset)').on('click', ':reset', function(){
или еще лучше:
$('form:has(:reset)').on('reset', function(){
PS: я лично чувствую, что сброс на сброс, а также запуск
blur
иfocus
события, прикрепленные к исходному выбору, являются некоторыми из наиболее заметные "отсутствующие" функции в select2!
Select2 использует определенный класс CSS, поэтому простой способ сбросить его:
$('.select2-container').select2('val', '');
и у вас есть преимущество, если у вас есть несколько Select2 в той же форме, все они будут сброшены с этим единым командованием.
иногда я хочу сбросить Select2, но я не могу без метода change (). Так что мое решение:
function resetSelect2Wrapper(el, value){ $(el).val(value); $(el).select2({ minimumResultsForSearch: -1, language: "fr" }); }
использование :
resetSelect2Wrapper("#mySelectId", "myValue");
для меня это работает только с любым из этих решений
$(this).select2('val', null);
или
$(this).select2('val', '');
// Store default values $('#filter_form [data-plugin="select2"]').each(function(i, el){ $(el).data("seldefault", $(el).find(":selected").val()); }); // Reset button action $('#formresetbtn').on('click', function() { $('#filter_form [data-plugin="select2"]').each(function(i, el){ $(el).val($(el).data("seldefault")).trigger('change'); }); });