Danh sách thả xuống rõ ràng với JQuery

Question

Tôi đã viết chức năng nhỏ này để điền vào danh sách thả xuống có dữ liệu từ máy chủ.

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

sau đó tôi có thể gọi hàm theo cách này:

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

Tất cả mọi thứ đang làm việc một cách hoàn hảo, ngoại trừ một dòng nơi tôi đang xóa dữ liệu cũ từ danh sách thả xuống. Tôi đang làm gì sai?

Bất kỳ mẹo nào có thể giúp cải thiện mã này cũng được đánh giá cao.

Answer 1

Chỉ cần sử dụng .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... 

---

Ngoài ra còn có a more concise way để xây dựng các tùy chọn:

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

Answer 2

Làm thế nào về lưu trữ mới options trong một variable, và sau đó sử dụng .html(variable) để thay thế dữ liệu trong số container?

Answer 3

Tôi đã thử cả hai .empty() cũng như .remove() cho trình đơn thả xuống của tôi và cả hai đều chậm. Vì tôi có gần 4.000 lựa chọn ở đó.

Tôi đã sử dụng .html("") nhanh hơn nhiều trong điều kiện của tôi.
Đó là dưới

$(dropdown).html(""); 

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>