Як я можу скинути форму за допомогою вибраного плагіна 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.