Как я могу сбросить форму с помощью выбранного плагина jQuery?


80

У меня есть набор selectэлементов в форме, с которой я использую плагин Jquery Chosen . Как я могу сбросить форму? Следующее не работает:

<input type="reset" />

2
Вам следует изменить принятый ответ на ответ Джека О'Нила. Остальные решения больше не работают.
Джеймс

1
Пожалуйста, измените ваш принятый ответ на ответ Джека О'Нила. потому что триггер последней версии теперь называется: обновлено
доброжелатель

1
@Jame & Good wisher: Мы не будем менять все ответы на вопросы на этом сайте при каждом обновлении плагина. Решение было правильным в то время. Роберт Уодделл прокомментировал ответ, я считаю, что это правильный путь.
GôTô 02

Ответы:


188

Вам нужно будет сбросить значение поля, затем запустить liszt:updatedсобытие на входе, чтобы заставить его обновиться, я сделал скрипку с рабочим примером здесь.

http://jsfiddle.net/VSpa3/3/

$(".chzn-select").chosen();
$('a').click(function(){
    $(".chzn-select").val('').trigger("liszt:updated");
});​

Начиная с выпуска selected v1.0 триггер теперь называется selected: updated. Любой, кто использует эту новую версию, должен запустить обновление, используя

$(".chosen-select").val('').trigger("chosen:updated");

15
Хороший ответ! В последней версии Chosen это должно быть "(" selected: updated ")"
Роберт Уодделл,

2
Отличный ответ! Но можно ли сбросить и снова показать исходный заполнитель?
Niels Sønderbæk

1
Все еще не работает. Я динамически заменяю свой выбор с помощью вызовов Ajax (метод jQuery load ()). Затем выдача нового триггера selected (). ("Selected: updated"); и не работает. Выбранный поиск по-прежнему не работает с новым выбором.
Марко Марсала

При использовании этого для полей выбора 'multiple: true', похоже, также удаляется заполнитель. Вы знаете, как сохранить заполнитель после очистки?
Дэвид Басалла

1
А, думаю, я нашел это ... $selectField.val([]).trigger('chosen:updated')похоже,
помогает

52

Начиная с выпуска selected v1.0 триггер теперь называется selected: updated. Любой, кто использует эту новую версию, должен запустить обновление, используя

$(".chosen-select").val('').trigger("chosen:updated");

1
Это должен быть правильный ответ из-за изменений. Ни одно из других решений, которые я нашел, не работает правильно. Спасибо!
Джеймс

1
Но не работает! Если выбор динамически заменяется другим выбором (метод jQuery load ()) с тем же идентификатором / именем, поиск перестает работать с новым выбором. Пытался вызвать .chosen () для нового select, вызвать .chosen ('destroy'), вызвать .trigger ("selected: updated") и их комбинации.
Марко Марсала

14

Вы можете попробовать это:

$('select').chosen('destroy');  

$('select').prop("selectedIndex", -1);   
$('select').chosen();

11

для того, чтобы перезагрузка работала естественно, используйте это:

$("input[type='reset'], button[type='reset']").click(function(e){
    e.preventDefault();

    var form = $(this).closest('form').get(0);
    form.reset();

    $(form).find('select').each(function(i, v) {
        $(v).trigger('chosen:updated');
    });
}

1
Использование form.reset () с последующим запуском selected: update - лучшее решение, особенно если вы хотите представить форму в том виде, в котором она была изначально отображена. Установка .val ('') не возвращает форму к значениям по умолчанию.
Just Plain High

Это работает. Не забудьте вручную сбросить выпадающие списки (выбрать), динамически добавленные в DOM.
Марко Марсала


0

Для более беспроблемного подхода ... предполагая, что ваши входные данные находятся внутри <form>тегов:

<form>
    <!-- your selects go here and any other input fields -->
    <input type="reset" value="Reset"> 
</form>

Вот что бы я сделал:

$("input[type='reset'], button[type='reset']").click(function(e){
      setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});

Смотрите скрипку здесь .


@MarcoMarsala, если вы посмотрите на скрипку, она действительно работает. Чем ваш код отличается от скрипки?
programhammer 07

1
Я обновился до 1.2.0 и все заработало без проблем. Мне даже не понадобился setTimeout. Вероятно, это была ошибка в 1.12
Марко Марсала

0

Ни один из предыдущих вариантов мне не подходит. Мне пришлось сделать это как в старой школе, даже используя некоторый собственный javascript, вот код:

$('#dllSample option').each(function(){
     $(this)[0].selected = false;   
});
$("#dllSample").trigger("chosen:updated");

0

Ни один из ответов здесь не помог мне. Я использую выбранный выбор с множественным атрибутом. Обычная кнопка формы отправки тоже не помогала. Итак, у меня была функция, которая делала это при нажатии.

//Gets the selected values
var selected = [];
    for (var option of document.getElementById('mySelect').options) {
        if (option.selected) {
            selected.push(option.value);
        }

    }

//Resets the form
document.getElementById('form1').reset();

//Chosen values doesnt get reset, so we do this manually
//Removes the values selected by clicking on the x icon
$link = $('a.search-choice-close');
            var i;
            for (i = 0; i < selected.length; i++) {
                $link[i].click();
            }

-1

Иногда вам нужно сбросить выбранный выбор, который вызывается.

я делаю это

jQuery.fn.chosen_reset = function(n){
  $(this).chosen('destroy');
  $(this).prop('selectedIndex', 0);
  $(this).chosen(n)
}

И вызовите эту функцию вот так, с параметрами в качестве аргумента

$('select').chosen_reset({width:'369px'});

-2

В jQuery должно работать что-то вроде этого

<input name="Text1" id="something" type="text">

<input type="reset" id="reset_me"/>


$("#reset_me").click(function() { 
$("#something").val("");
});

$ j ('. chzn-select'). each (function () {$ j (this) .val ("")}); не очищает теги в выбранных
PH

@PH, если бы вы могли привести пример вашего кода, чтобы мы могли помочь
MHowey

sottenad только что ответил на это, пожалуйста, обратитесь к его ссылке jsfiddle выше. теперь мой код выглядит как $ j ('. chzn-select'). each (function () {$ j (this) .val (""). trigger ("liszt: updated");});
PH
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.