Jak mogę zresetować formularz za pomocą wtyczki wybranej przez jQuery?


80

Mam kilka selectelementów w formie, w której używam wtyczki Jquery Chosen . Jak mogę zresetować formularz? Nie działa:

<input type="reset" />

2
Powinieneś zmienić zaakceptowaną odpowiedź na odpowiedź Jacka O'Neilla. Inne rozwiązania już nie działają.
James

1
Zmień zaakceptowane odpowiedzi na Jack O'Neill answere. ponieważ wyzwalacz najnowszej wersji nazywa się teraz: zaktualizowany
Well Wisher

1
@Jame & Well wisher: To nie jest tak, że będziemy zmieniać wszystkie odpowiedzi na pytania na tej stronie po każdej aktualizacji wtyczki. Rozwiązanie było wtedy poprawne. RobertWaddell skomentował odpowiedź, uważam, że jest to właściwy sposób.
GôTô

Odpowiedzi:


188

Będziesz musiał zresetować wartość pola, a następnie wyzwolić liszt:updatedzdarzenie na wejściu, aby zaktualizować je. Zrobiłem tu skrzypce z działającym przykładem.

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

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

Od wydania wybranej wersji 1.0 wyzwalacz nazywa się teraz „wybrany: zaktualizowany”. Każdy, kto używa tej nowej wersji, musi uruchomić aktualizację za pomocą

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

15
Dobra odpowiedź! W najnowszej wersji Chosen powinno to być "(" selected: updated ")"
Robert Waddell

2
Świetna odpowiedź! Ale czy można zresetować i ponownie wyświetlić oryginalny symbol zastępczy?
Niels Sønderbæk

1
Wciąż nie działa. Dynamicznie zastępuję mój wybór za pomocą wywołań Ajax (metoda load () jQuery). Następnie wydanie nowego wyzwalacza selected (). („Selected: updated”); i nie działa. Wybrane wyszukiwanie nadal nie działa na nowym zaznaczeniu.
Marco Marsala,

Używając tego dla pól wyboru „wiele: prawda”, wydaje się, że usuwa również symbol zastępczy. Czy znasz sposób na zachowanie symbolu zastępczego po wyczyszczeniu?
David Basalla

1
Ach, myślę, że to znalazłem ... $selectField.val([]).trigger('chosen:updated')wydaje się działać
David Basalla

52

Od wydania wybranej wersji 1.0 wyzwalacz nazywa się teraz „wybrany: zaktualizowany”. Każdy, kto używa tej nowej wersji, musi uruchomić aktualizację za pomocą

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

1
To powinna być poprawna odpowiedź ze względu na zmiany. Żadne z innych rozwiązań, które znalazłem, nie działa poprawnie. Dziękuję Ci!
James

1
Ale nie działa! Jeśli zaznaczenie zostanie zastąpione dynamicznie inną metodą select (metoda load () jQuery) o tym samym identyfikatorze / nazwie, wyszukiwanie przestanie działać na nowym zaznaczeniu. Próbowano wywołać .chosen () przy nowym wyborze, wywołać .chosen ('zniszcz'), wywołać .trigger ("wybrany: zaktualizowany") i ich kombinacje.
Marco Marsala

14

Możesz spróbować tego:

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

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

11

aby reset działał naturalnie, użyj tego:

$("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
Użycie form.reset (), a następnie wywołanie polecenia selected: update jest najlepszym rozwiązaniem, szczególnie jeśli chcesz przedstawić formularz tak, jak był pierwotnie wyświetlany. Ustawienie .val ('') nie przywraca formularza do wartości domyślnych.
Just Plain High

To działa. Pamiętaj, aby ręcznie zresetować skrzynki combo (wybierz) dynamicznie dodane do DOM.
Marco Marsala,


0

Dla bardziej bezproblemowego podejścia ... zakładając, że dane wejściowe znajdują się wewnątrz <form>tagów:

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

Oto, co bym zrobił:

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

Zobacz skrzypce tutaj .


@MarcoMarsala Jeśli spojrzysz na skrzypce, to działa. Czym różni się twój kod od skrzypiec?
prograhammer

1
Zaktualizowałem do wersji 1.2.0 i wszystko zaczęło działać bez kłopotów. Nie potrzebowałem nawet setTimeout. Prawdopodobnie był to błąd w 1.12
Marco Marsala

0

Żadna z poprzednich opcji nie działa dla mnie. Musiałem to zrobić jak w starej szkole, nawet używając jakiegoś natywnego javascript, oto kod:

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

0

Żadna z odpowiedzi tutaj nie zadziałała. Używam wybranego elementu typu select z atrybutem wielokrotnym. Zwykły przycisk formularza wysyłania też nie zadziałał. Po prostu otrzymałem funkcję, która robi to po kliknięciu.

//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

Czasami trzeba zresetować wybrany, który jest wywoływany.

robię to

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

I wywołaj tę funkcję w ten sposób, z opcjami jako argumentem

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

-2

W jQuery coś takiego powinno działać

<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 ("")}); nie usuwa tagów w wybranym
PH

@PH, gdybyś mógł podać przykład swojego kodu, abyśmy mogli pomóc
MHowey

sottenad właśnie odpowiedział na to, proszę odnieść się do jego linku jsfiddle powyżej. teraz mój kod wygląda jak $ j ('. chzn-select'). each (function () {$ j (this) .val (""). trigger ("liszt: updated");});
PH
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.