javascript - 使用 JQuery 清除下拉列表

Question

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

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

---

还有 a more concise way建立选项:

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