Clear dropdownlist with JQuery

Question

I wrote this little function to fill a drop down list with data from the server.

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

I can then call the function in this way:

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

Everything is working perfectly, except for the one line where I'm clearing old data from the drop down list. What am I doing wrong?

Any tips that might help to improve this code are also highly appreciated.

Answer 1

Just use .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... 

---

There's also a more concise way to build up the options:

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

Answer 2

I tried both .empty() as well as .remove() for my dropdown and both were slow. Since I had almost 4,000 options there.

I used .html("") which is much faster in my condition.
Which is below

  $(dropdown).html("");