Очистить выпадающий список с помощью 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"))

Все работает отлично, за исключением одной строки, где я очищаю старые данные из выпадающего списка. Что я делаю неправильно?

Любые советы, которые могут помочь улучшить этот код, также высоко оценены.

Ответ 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...

Там также более сжатый способ для создания опций:

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

Ответ 2

Я попробовал как .empty(), так и .remove() для моего раскрывающегося списка, и оба были медленными. Так как у меня было почти 4000 опций.

Я использовал .html(""), который намного быстрее в моем состоянии.
Что ниже

  $(dropdown).html("");

Ответ 3

Как сохранить новый options в variable, а затем с помощью .html(variable) заменить данные в container?

Ответ 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>