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.