Löschen Sie die Dropdown-Liste mit JQuery

75

Ich habe diese kleine Funktion geschrieben, um eine Dropdown-Liste mit Daten vom Server zu füllen.

function fillDropDown(url, dropdown) {
    $.ajax({
        url: url,
        dataType: "json"
    }).done(function (data) {
        // Clear drop down list
        $(dropdown).find("option").remove(); <<<<<< Issue here
        // Fill drop down list with new data
        $(data).each(function () {
            // Create option
            var $option = $("<option />");
            // Add value and text to option
            $option.attr("value", this.value).text(this.text);
            // Add option to drop down list
            $(dropdown).append($option);
        });
    });
}

Ich kann die Funktion dann folgendermaßen aufrufen:

fillDropDown("/someurl/getdata", $("#dropdownbox1"))

Alles funktioniert einwandfrei, bis auf die eine Zeile, in der ich alte Daten aus der Dropdown-Liste lösche. Was mache ich falsch?

Alle Tipps, die zur Verbesserung dieses Codes beitragen könnten, werden ebenfalls sehr geschätzt.

Ätherix
quelle

Antworten:

202

Verwenden Sie einfach .empty():

// snip...
}).done(function (data) {
    // Clear drop down list
    $(dropdown).empty(); // <<<<<< No more issue here
    // Fill drop down list with new data
    $(data).each(function () {
        // snip...

Es gibt auch eine präzisere Möglichkeit , die Optionen aufzubauen:

// snip...
$(data).each(function () {
    $("<option />", {
        val: this.value,
        text: this.text
    }).appendTo(dropdown);
});
Matt Ball
quelle
1
Übrigens würde dies als jQuery-Plugin mit ein wenig Refactoring ganz gut funktionieren.
Matt Ball
1
Für mich waren Daten keine DOM-Liste, sondern ein Javascript-Array, also stattdessen $(data).each(function () ...->$.each(data, function()..
AaronLS
Ich musste groß ValueText
Rafael
21

Ich habe sowohl versucht .empty()als auch .remove()für mein Dropdown und beide waren langsam. Da hatte ich dort fast 4.000 Möglichkeiten.

Ich habe verwendet, .html("")was in meinem Zustand viel schneller ist.
Welches ist unten

  $(dropdown).html("");
शेखर
quelle
11
4000 Optionen sind wahrscheinlich zu viele für eine vom Benutzer bedienbare Webseite. Viele Browser haben sogar Probleme beim Rendern. Betrachten Sie eine Seitenliste oder eine automatische Vervollständigung / einen Vorschlag.
StingyJack
2
<select id="ddlvalue" name="ddlvaluename">
<option value='0' disabled selected>Select Value</option>
<option value='1' >Value 1</option>
<option value='2' >Value 2</option>
</select>

<input type="submit" id="btn_submit" value="click me"/>



<script>
$('#btn_submit').on('click',function(){
      $('#ddlvalue').val(0);
});
</script>
Gurung
quelle
0

Wie wäre es, wenn Sie das Neue optionsin einem speichern variableund dann verwenden .html(variable), um die Daten in dem zu ersetzen container?

Robert
quelle