Borrar la lista desplegable con JQuery

Question

Escribí esta pequeña función para completar una lista desplegable con datos del servidor.

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

A continuación, puedo llamar a la función de esta manera:

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

Todo está funcionando perfectamente, a excepción de la línea en la que estoy borrar los datos antiguos de la lista desplegable. ¿Qué estoy haciendo mal?

Cualquier consejo que pueda ayudar a mejorar este código también es muy apreciado.

Answer 1

sólo tiene que utilizar .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... 

---

También hay a more concise way para construir las opciones:

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

Answer 2

¿Qué hay de almacenar la nueva options en un variable, y luego usando .html(variable) para reemplazar los datos en el container?

Answer 3

Intenté tanto .empty() como .remove() para mi menú desplegable y ambos eran lentos. Ya que tenía casi 4,000 opciones allí.

He utilizado .html("") que es mucho más rápido en mi condición.
que está por debajo

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