使用JQuery清除下拉列表

Aet*_*rix 67 javascript 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);
        });
    });
}
Run Code Online (Sandbox Code Playgroud)

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

fillDropDown("/someurl/getdata", $("#dropdownbox1"))
Run Code Online (Sandbox Code Playgroud)

一切都工作得很好,除了我从下拉列表中清除旧数据的一行.我究竟做错了什么?

任何可能有助于改进此代码的提示也受到高度赞赏.

Mat*_*all 189

只需使用.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...
Run Code Online (Sandbox Code Playgroud)

还有一种更简洁的方法来构建选项:

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


शेख*_*ेखर 20

我都尝试.empty(),以及.remove()对我的下拉和两个很慢.因为那里有近4,000种选择.

我使用的.html("")是在我的情况下更快.
以下是哪个

  $(dropdown).html("");
Run Code Online (Sandbox Code Playgroud)

  • 对于用户可操作的网页,4000个选项可能太多.许多浏览器甚至会出现问题.考虑分页列表或自动完成/建议. (10认同)