Effacer la liste déroulante avec JQuery

Question

J'ai écrit cette petite fonction pour remplir une liste déroulante avec les données du serveur.

 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);
        });
    });
}
 

Je peux alors appeler la fonction de cette façon:

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

Tout fonctionne parfaitement, à l'exception de la ligne où je supprime les anciennes données de la liste déroulante. Qu'est-ce que je fais mal?

Tous les conseils qui pourraient aider à améliorer ce code sont également très appréciés.

Answer 1

Il suffit d'utiliser .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...
 

---

Il existe également un moyen plus concis de créer des options:

 // snip...
$(data).each(function () {
    $("<option />", {
        val: this.value,
        text: this.text
    }).appendTo(dropdown);
});
 

Answer 2

J'ai essayé les deux .empty() ainsi que .remove() pour ma liste déroulante et les deux étaient lents. Depuis que j'avais presque 4000 options là-bas.

J'ai utilisé .html("") ce qui est beaucoup plus rapide dans mon état.
Qui est ci-dessous

   $(dropdown).html("");
 

Answer 3

Pourquoi ne pas stocker les nouvelles options dans une variable, puis utiliser .html (variable) pour remplacer les données du conteneur?