CODEWITHSUNDEEP
jquery
SkyeBoniwell
SkyeBoniwell

Reputation: 7122

displaying a list of numbers in a dropdown element using jQuery

I created a div that is shown and hidden when a button is clicked.

It has a dropdown that displays the numbers 0 - 10. It works fine the first time, but if I close it, and reopen, the drop down list will be populated twice, and it keeps adding on 0-10 to the 0-10 that is already there.

Is there a way so that it always only displays 0 - 10 once?

Thanks

    $("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));
        }
    });
});

Upvotes: 1

Views: 434

Answers (1)

kamil
kamil

Reputation: 3522

Clear your dropdown with empty() function. It will remove all child elements of parent element.

$("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));
        }
    });
});

Upvotes: 3

Related Questions