使用 JQuery 清除下拉列表答案

【问题标题】：Clear dropdownlist with JQuery使用 JQuery 清除下拉列表
【发布时间】：2016-03-03 13:01:28
【问题描述】：

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

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"))

一切正常，除了我从下拉列表中清除旧数据的那一行。我做错了什么？

非常感谢任何可能有助于改进此代码的提示。

【问题讨论】：

标签： javascript jquery

【解决方案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);
});

【讨论】：

顺便说一句，这将作为一个稍微重构的 jQuery 插件工作得很好。
对我来说，数据不是 DOM 列表，而是 javascript 数组，所以改为 $(data).each(function () ... -> $.each(data, function()..
我必须大写 Value 和 Text

【解决方案2】：

我在下拉菜单中尝试了.empty() 和.remove()，但两者都很慢。因为我在那里有将近 4,000 个选项。

我使用了.html("")，这在我的情况下要快得多。
下面是哪个

  $(dropdown).html("");

【讨论】：

4000 个选项对于用户可操作的网页来说可能太多了。许多浏览器甚至会出现问题。考虑分页列表或自动完成/建议。

【解决方案3】：

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

【讨论】：

【解决方案4】：

将新的options 存储在variable 中，然后使用.html(variable) 替换container 中的数据如何？

【讨论】：