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()删除option循环之前的所有for项。

Answer 2

$(function ($)
{
    $populateTeamSelection = function(team)
    {
        $result = $.parseJSON(team,function(call){$handle = call;});
        $result.success(function(){ $data = $handle; });
        $result.error(function()
        {
            //Do something or nothing on error
        });
        $result.complete(function()
        {
            //Clear all current options first
            $('#teamSelection').html('');

            //Populate with new data
            $.each($data,function(lable,value)
            {
                $("#teamSelection").append($("<option></option>").attr("value",value['teamID']).text(value['teamName']));
            });
        });
    };
}(jQuery));

$(document).ready(function()
{
    $('.show_hide2').click(function()
    {
        $(".slidingDiv2").slideToggle();
        $populateTeamSelection(team);
    });
});

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

2 个答案: