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

我创建了一个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));
        }
    });
});

$（“body”）。在（“单击”，“设置控件”，函数（）{
//$（“#设置”）.css（“显示”、“块”）；
$（“#设置”）.slideToggle（'slow'，function（）{
var maxAllowed=[]；
maxAllowed=[1,2,3,4,5,6,7,8,9,10,11]；
对于（变量i=0；i

使用

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));
        }
    });
});

$（“body”）。在（“单击”，“设置控件”，函数（）{
//$（“#设置”）.css（“显示”、“块”）；
$（“#设置”）.slideToggle（'slow'，function（）{
var maxAllowed=[]；
maxAllowed=[1,2,3,4,5,6,7,8,9,10,11]；
$（“#尝试”）.empty（）；
对于（变量i=0；i