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