Подтвердить что ты не робот

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

Каким будет лучший способ для reset выбранного элемента по умолчанию? Я использую библиотеку Select2, и при использовании обычной кнопки type="reset" значение в раскрывающемся списке не 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>
4b9b3361

Ответ 1

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

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

Ответ 2

Вы также можете выбрать reset select2 с помощью

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

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

Ответ 3

В соответствии с последней версией (select2 3.4.5), зарегистрированной здесь, это будет так же просто, как:

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

Ответ 4

версия 4.0

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

  • Дисплей элемента управления Select2 не обновляется, когда его значение изменяется из-за формы reset.
  • Параметр "Все" не имеет атрибута value.
  • Параметр "Все" отключен.

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

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

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

Или, когда форма reset:

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

Как использовать код:

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

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

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

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

Если опция "Все" не была отключена, вам просто нужно принудительно обновить Select2, и в этом случае вы могли бы использовать:

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

Примечание. Следующий код Lenart - это способ очистить выбор, но он не вызывает выбор "Все" :

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

Ответ 8

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

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

вам нужно убедить select2 восстановить первоначально выбранное значение на reset, подобно тому, как работает родная форма. Для этого сначала создайте reset собственную форму, а затем обновите 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());
}

Ответ 9

То, что я нашел, работает хорошо:

если у вас есть опция placeholder, например "All" или "-Select-", и ее первая опция и что вы хотите установить значение, когда вы "reset", вы можете использовать

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

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

Если у вас нет заполнителя и вы просто хотите, чтобы в поле не отображался текст:

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

Ответ 10

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

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

Таким образом: Вам не нужно создавать новую логику для каждого select2 в вашем приложении.

И вам не нужно знать значение по умолчанию (которое, кстати, не обязательно должно быть "" или даже первый вариант)

Наконец, установка значения :selected не всегда приведет к истинному reset, так как текущий выбранный, возможно, был бы программно установлен на клиенте, тогда как действие по умолчанию form select должно возвращать элемент ввода значения для отправленных сервером.

EDIT: В качестве альтернативы, учитывая устаревший статус live, мы могли бы заменить первую строку следующим:

$('form:has(:reset)').on('click', ':reset', function(){

или еще лучше:

$('form:has(:reset)').on('reset', function(){

PS: Я лично считаю, что сброс на reset, а также запуск событий blur и focus, связанных с исходным выбором, являются одними из наиболее заметных "недостающих" функций в select2!

Ответ 11

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

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

И у вас есть преимущество, если у вас есть несколько Select2 в одной и той же форме, все они будут сброшены с помощью этой единственной команды.

Ответ 12

Иногда я хочу reset Select2, но не могу без метода change(). Итак, мое решение:

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

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

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

Ответ 13

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

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

или

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