javascript - 如何在不重新填充列表的情况下维护下拉列表的当前信息？

Question

目前，我有一个下拉列表，其中填充了来自 SQL 数据库的团队名称:

$(".show_hide2").click(function () {
    ("#team").find("tr:gt(0)").remove();
    $(".slidingDiv2").slideToggle();
    teams = $.parseJSON(getTeams());
    for (i = 0; i < teams.length; i++) {
        var team = getTeam(teams[i]);
        updateTeamBoard(team);
        populateTeamSelection(team);
    }
}

这是填充下拉列表的代码。

JS:

function populateTeamSelection(team) {
    var team = $.parseJSON(team);
    $("#teamSelection").find("#tr:gt(0)").remove();
    $("<option value='" + team.teamID + "'>" + team.teamName + "</option>").appendTo("#teamSelection");
}

HTML:

<div class="slidingDiv2">
    <select id="teamSelection">
        <option id="default" value="0">Select A Team</option>
    </select>
    <input type="button" id="teamViewer" value="Team Viewer"></input>
</div>

问题是，每次我单击显示/隐藏按钮时，它都会保留列表中的当前信息，然后将相同的信息添加到列表中。我正在使用 AJAX 动态生成表格和列表，但出于某种原因我无法弄清楚这一点，我觉得它相当简单。非常感谢任何帮助。

Answer 1

每次单击时，都会调用 populateTeamSelection()。每次调用 populateTeamSelection() 时，它都会向列表中添加一些内容。快速修复是在添加任何项目之前从列表中删除所有项目。

您可以使用 $('select').children().remove() 删除 for 之前的所有 option 项循环。