2

目前，我有一个下拉列表，其中填充了来自 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 来动态生成表格和列表，但由于某种原因，我无法弄清楚这一点，我觉得它相当简单。任何帮助是极大的赞赏。

4

2 回答 2

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);
    });
});
于 2012-06-21T21:53:21.647 回答
2

每次点击，populateTeamSelection()都会被调用。每次populateTeamSelection()被调用时，它都会在列表中附加一些内容。快速解决方法是在添加任何项目之前从列表中删除所有项目。

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

于 2012-06-21T21:43:23.373 回答