JQuery-Dropdown-Liste löschen und aktualisieren


72

Ich versuche, die ausgewählte Dropdown-Liste von jQuery zu löschen und zu aktualisieren.

HTML:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="" selected="selected"></option>
    <option value="x">remove me</option>
</select>

Wenn ich auf "Aktualisieren" klicke, sollte dies folgendermaßen aussehen:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="1">test</option>
</select>

Was ich versucht habe:

$("#refreshgallery").click(function(){
    $('#picturegallery').empty();
    var newOption = $('<option value="1">test</option>');
    $('#picturegallery').append(newOption);
});

Aber ich kann es nicht dazu bringen, diese Dropdown-Liste zu aktualisieren ... Hilfe? :) :)


1
Ist Ihr Code in DOM bereit?
Tushar Gupta - Curioustushar

2
Ja, es ist (zu kurzer Kommentar, zufälliger Text)
Plexcell

Antworten:


170

Mit können .trigger("chosen:updated");Sie die Optionsliste nach dem Anhängen aktualisieren.

Dynamisch aktualisieren : Wenn Sie die Optionen in Ihrem Auswahlfeld aktualisieren müssen und möchten, dass Chosen die Änderungen übernimmt, müssen Sie das Ereignis "Ausgewählt: Aktualisiert" im Feld auslösen. Ausgewählt wird sich basierend auf dem aktualisierten Inhalt neu erstellen.

Dein Code:

$("#refreshgallery").click(function(){
        $('#picturegallery').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#picturegallery').append(newOption);
        $('#picturegallery').trigger("chosen:updated");
    });

4
Ja ... .html () bricht die gewählte Kombination.
Todd Vance

4
Vielen Dank, ich habe diese Lösung gesucht
logudotcom

2
Du hast mein Leben gerettet :)
Zied R.

1
Wenn das bei mir nicht funktioniert. Versuchen Sie Folgendes: $ ('# picturegallery'). trigger ("liszt: aktualisiert");
Nhan Tran

7

Wenn es trigger("chosen:updated");nicht funktioniert, verwenden Sie .trigger("liszt:updated");@Nhan Tran, es funktioniert einwandfrei.


1
Bitte verwenden Sie ausschließlich Antworten, um die Frage zu beantworten . Um einen Autor zu kritisieren oder um Klarstellung zu bitten, hinterlassen Sie einen Kommentar unter seinem Beitrag. Sie können jederzeit Ihre eigenen Beiträge kommentieren. Sobald Sie einen ausreichenden Ruf haben, können Sie jeden Beitrag kommentieren . Verwenden Sie in der Zwischenzeit keine Antworten, um Kommentare zu veröffentlichen.
Tim Diekmann

@ TimDiekmann Diese Antwort ist für mich nützlicher, aber Sie sagen, er hat einen Fehler gemacht. Hier suchen wir nach Antworten, die im Gegensatz zu Facebook / Instagram / anderen sozialen Medien nicht auf Beiträge und Kommentare lauten. ca Michel=> Danke.
Silambarasan RD

2
$("#idofBtn").click(function(){
        $('#idofdropdown').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#idofdropdown').append(newOption);
        $('#idofdropdown').trigger("chosen:updated");
    });

1
Bitte nehmen Sie sich einen Moment Zeit und beschreiben Sie, wie dieser Code das Problem löst.
31.

0

MVC 4:

    function Cargar_BS(bs) {
        $.getJSON('@Url.Action("GetBienServicio", "MonitoreoAdministracion")',
                        {
                            id: bs
                        },
                        function (d) {
                            $("#txtIdItem").empty().append('<option value="">-Seleccione-</option>');
                            $.each(d, function (idx, item) {
                                jQuery("<option/>").text(item.C_DescBs).attr("value", item.C_CodBs).appendTo("#txtIdItem");
                            })
                            $('#txtIdItem').trigger("chosen:updated");
                        });
    }

0

In meinem Fall muss ich den ausgewählten Wert bei jeder Änderung aktualisieren, da beim Senden des Formulars immer falsche Werte angezeigt werden und ich mehrere ausgewählte Dropdown-Listen verwendet habe. Anstatt einzelne Einträge zu aktualisieren, ändern Sie die Auswahl, um alle Dropdown-Listen zu aktualisieren. Dies könnte jemandem helfen

 $(".chosen-select").chosen().change(function () {
    var item = $(this).val();
    $('.chosen-select').trigger('chosen:updated');
});

0

Wenn für den Fall trigger("chosen:updated");nicht für Sie funktioniert. Sie können versuchen, $('#ddl').trigger('change');wie in meinem Fall seine Arbeit für mich.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.