用JQuery清除下拉列表

我写了这个小函数来填充服务器数据的下拉列表。

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

然后我可以这样调用函数：

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

除了我从下拉列表中清除旧数据的一行外，一切正常。 我究竟做错了什么？

任何可能有助于改善此代码的提示也非常感谢。

Answer 1

只需使用.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... 

---

还有一个更简洁的方法来build立选项：

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

Answer 2

我试了两个.empty()以及.remove()我的下拉列表，都很慢。 因为我有近4000个选项。

我使用了.html("") ，这在我的情况下要快得多。
下面是

  $(dropdown).html(""); 

Answer 3

如何将新options存储在variable ，然后使用.html(variable)replacecontainer的数据？

Answer 4

 <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>