使用JQuery清除下拉列表

wgeznvg7 于 2022-11-03 发布在 jQuery

关注(0)|答案(4)|浏览(180)

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

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

一切都很好，除了一行我从下拉列表中清除了旧数据。我做错了什么？
任何可能有助于改进此代码的提示也非常感谢。

jquery

来源：https://stackoverflow.com/questions/9909326/clear-dropdownlist-with-jquery

4条答案

按热度按时间

izj3ouym1#

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

There's also a more concise way to build up the options:

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

赞(0）回复(0）举报 2022-11-03

lymnna712#

我尝试了.empty()和.remove()作为我的下拉菜单，两者都很慢。因为我有近4,000个选项在那里。
我用的是.html("")，在我的条件下要快得多。
下面是哪个

$(dropdown).html("");

赞(0）回复(0）举报 2022-11-03

wn9m85ua3#

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

赞(0）回复(0）举报 2022-11-03

nhaq1z214#

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

赞(0）回复(0）举报 2022-11-03