jquery - 使用 jQuery 在下拉元素中显示数字列表

Question

我创建了一个 div，单击按钮时会显示和隐藏该 div。

它有一个显示数字 0 - 10 的下拉列表。第一次它工作正常，但如果我关闭它并重新打开，下拉列表将填充两次，并且它会不断将 0-10 添加到0-10 已经存在。

有没有办法让它始终只显示 0 - 10 一次？

谢谢

    $("body").on("click", "#settingsControl", function () {
    //$("#settings").css("display", "block");
    $('#settings').slideToggle('slow', function () {
        var maxAllowed = [];
        maxAllowed = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        for (var i = 0; i < maxAllowed.length; i++) {
            $("#attempts").append($("<option />").val(i).html(i));
        }
    });
});

Answer 1

使用 empty() 函数清除下拉列表。它将删除父元素的所有子元素。

$("body").on("click", "#settingsControl", function () {
    //$("#settings").css("display", "block");
    $('#settings').slideToggle('slow', function () {
        var maxAllowed = [];
        maxAllowed = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        $("#attempts").empty();
        for (var i = 0; i < maxAllowed.length; i++) {
            $("#attempts").append($("<option />").val(i).html(i));
        }
    });
});