Як я можу скинути форму за допомогою вибраного плагіна jQuery?


80

У мене є купа selectелементів у формі, за допомогою якої я використовую плагін Jquery Chosen . Як я можу скинути форму? Наступне не працює:

<input type="reset" />

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

1
Будь ласка, змініть прийняту відповідь на відповідь Джека О'Ніла. тому що остання версія тригера зараз називається: оновлена
Ну Вішер

1
@Jame & Well Wisher: Не схоже, що ми змінюватимемо всі відповіді на запитання на цьому сайті щоразу, коли плагін оновлюється. На той час рішення було правильним. РобертВадделл прокоментував відповідь, я вважаю, що це шлях.
GôTô

Відповіді:


188

Вам потрібно буде скинути значення поля, а потім викликати liszt:updatedподію на вході, щоб оновити його, я зробив тут скрипку з робочим прикладом.

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

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

З моменту випуску вибраної версії 1.0 тригер тепер називається 'selected: updated'. Кожен, хто використовує цю нову версію, повинен активувати оновлення за допомогою

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

15
Хороша відповідь! З останньою версією Вибраного це має бути "(" вибрано: оновлено ")"
Роберт Вадделл

2
Чудова відповідь! Але чи можна скинути налаштування та показати оригінальний заповнювач ще раз?
Niels Sønderbæk

1
Все ще не працює. Я динамічно замінюю мій select за допомогою викликів Ajax (метод jQuery load ()). Потім видається новий вибраний (). Тригер ("вибраний: оновлений"); і не працює. Обраний пошук все ще не працює на новому виділенні.
Марко Марсала

При використанні цього параметра для полів "multiple: true", здається, також видаляється заповнювач. Чи знаєте ви про спосіб утримання заповнювача після очищення?
Девід Базалла,

1
Ах, думаю, я знайшов ... $selectField.val([]).trigger('chosen:updated')здається, це трюк
Девід Басалла,

52

З моменту випуску вибраної версії 1.0 тригер тепер називається 'selected: updated'. Кожен, хто використовує цю нову версію, повинен активувати оновлення за допомогою

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

1
Це має бути правильною відповіддю через зміни. Жодне з інших рішень, які я знайшов, не працює коректно. Дякую!
James

1
Але не працювати! Якщо виділення динамічно замінено іншим виділенням (метод jQuery load ()) з однаковим ідентифікатором / ім'ям, пошук припинить роботу над новим виділенням. Спробував зателефонувати .chosen () за новим вибором, зателефонувати .chosen ('знищити'), зателефонувати .trigger ("вибрано: оновлено") та їх комбінації.
Марко Марсала

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 (), а потім активація вибраного: 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, якщо ти подивишся на скрипку, це дійсно працює. Чим ваш код відрізняється від скрипки?
prograhammer

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.