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

Question

我创建了一个在单击按钮时显示和隐藏的 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));
        }
    });
});