Сброс значения 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 54

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

Я вижу три проблемы:

  1. отображение элемента управления Select2 не обновляется при изменении его значения из-за сброса формы.
  2. опция "Все" не имеет .
  3. опция "Все" отключена.

во-первых, я рекомендую вам использовать 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');
            });
        });