Сброс значения Select2 в выпадающем меню с кнопкой сброса

Question

Что было бы лучшим способом сбросить выбранный элемент по умолчанию? Я использую 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> 

Answer 1

Я хотел бы попробовать что-то вроде этого:

$(function(){ 
    $("#searchclear").click(function(){ 
     $("#d").select2('val', 'All'); 
    }); 
}); 

Answer 2

Вы также можете сбросить ВЫБ.2 значение с помощью

$(function() { 
    $('#d').select2('data', null) 
}) 

поочередно вы можете передать 'allowClear': true при вызове select2, и у него будет кнопка X, чтобы сбросить его значение.

Answer 3

Если у вас есть заселенный выберите виджет, например:

<select> 
    <option value="1">one</option> 
    <option value="2" selected="selected">two</option> 
    <option value="3">three</option> 
    ... 

вы хотите, чтобы убедить ВЫБ.2 восстановить первоначально выбранное значение на сброс, подобно тому, как нативных форм работы. Для достижения этой цели, первый сброс нативную форму, а затем обновить ВЫБ.2:

$('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()); 
} 

Answer 4

Лучший способ сделать это:

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID 
$('#e1').append(new Option()); // to add the placeholder and the allow clear 

Answer 5

Согласно последней версии (ВЫБ.2 3.4.5) документально here, это было бы так просто, как:

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

Answer 6

Для достижения общего решения, то почему бы не сделать это:

$(':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: I лично чувствую, что сброс при сбросе, а также запуск blur и focus событий в нарисованные до исходного выбора, являются одними из самых заметных «недостающих» функций в select2!

Answer 7

Выбор2 использует определенный класс CSS, поэтому легкий способ сбросить это:

$('.select2-container').select2('val', ''); 

И у вас есть преимущество, если у вас есть несколько ВЫБ.2 в той же форме, все они будут сброшены с этим единственная команда.

Answer 8

Я вижу три вопроса:

1. Дисплей управления Select2 не обновляется, когда его значение изменяется из-за сброса формы.
2. Параметр «Все» не имеет атрибута value.
3. Опция «Все» отключена.

Во-первых, я рекомендую вам использовать функцию setTimeout, чтобы гарантировать, что код будет выполнен после завершения сброса формы.

Вы можете выполнить код при нажатии на кнопку:

$('#searchclear').click(function() { 
    setTimeout(function() { 
     // Code goes here. 
    }, 0); 
}); 

Или когда форма обнуляется:

$('form').on('reset', function() { 
    setTimeout(function() { 
     // Code goes here. 
    }, 0); 
}); 

Что касается того, что код для использования:

Поскольку Параметр «Все» отключен, сброс формы не делает его выбранным. Поэтому вы должны явно указать его как выбранное значение. Способ сделать это с помощью функции Select2 «val». А поскольку параметр «Все» не имеет атрибута value, его значение совпадает с его текстом, который является «Все».Таким образом, вы должны использовать код, указанный на thtsigma в выбранном ответе:

$("#d").select2('val', 'All'); 

Если атрибут value="" должны были быть добавлены к опции «All», то вы можете использовать код, указанный Даниэль Dener:

$("#d").select2('val', ''); 

Если опция «All» не был отключен, то вы просто должны заставить ВЫБ.2 обновить, в этом случае вы можете использовать:

$('#d').change(); 

Примечание: следующая Код по Lenart способ очистить выбор, но это не вызывает опция «All», чтобы выбрать:

$('#d').select2('data', null) 

Answer 9

вы можете использоваться:

$("#d").val(null).trigger("change"); 

Это очень просто и правильно работать! Если использование с кнопкой сброса:

$('#btnReset').click(function() { 
    $("#d").val(null).trigger("change"); 
}); 

Answer 10

То, что я нашел хорошо работает следующим образом:

, если у вас есть вариант шаблонного типа «Все» или «-Выберите-» и его первый вариант, и это что вы хотите установить значение, когда вы «перезагрузки» вы можете использовать

$('#id').select2('val',0); 

0, по существу, тот вариант, который вы хотите установить его на сброс. Если вы хотите установить его на последнюю опцию, то получите длину опций и установите ее в качестве длины - 1. В основном используйте индекс любой опции, которую вы хотите установить для значения select2 для сброса.

Если вы не имеете заполнители и просто хотите текст не появляться в использовании поля:

$('#id').select2('val',''); 

Answer 11

Иногда я хочу, чтобы сбросить ВЫБ.2, но я не могу без изменения() метод. Поэтому мое решение:

function resetSelect2Wrapper(el, value){ 
    $(el).val(value); 
    $(el).select2({ 
     minimumResultsForSearch: -1, 
     language: "fr" 
    }); 
} 

Использование:

resetSelect2Wrapper("#mySelectId", "myValue"); 

Answer 12

Для меня это работает только с любым из этих растворов

$(this).select2('val', null); 

или

$(this).select2('val', ''); 

Answer 13

версия 4.0

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

Это правильное решение теперь в соответствии с устаревшей сообщения брошенной в режиме отладки: «Метод select2("val") устарел и будет удален в более поздних версиях Select2. Используйте $element.val() вместо»

Answer 14

// 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'); 
      }); 
     });