如何附加到另一个页面上的选择下拉菜单？

I'm working on creating a service that allows you to create team or user based challenges. Using HTML 5 specifications to design the page, I've run into a bit of an issue appending to a drop down list that resides in another page. The entirety of functionality lives within two pages, mainly by making AJAX calls to other pages. There's a little function that appends 2 properties of a team to a drop down list, but I can't seem to get it to work properly.

我正致力于创建一项服务,允许您创建基于团队或用户的挑战。使用HTML 5规范来设计页面,我遇到了一个问题,附加到另一个页面中的下拉列表。整个功能都在两页内,主要是通过对其他页面进行AJAX调用。有一个小功能可以将团队的2个属性附加到下拉列表中,但我似乎无法让它正常工作。

Code:

var teams = $.parseJSON(getAllTeams());
    $('#multiPurpose').load('allTeams2.html #teamSelect');
    for (i = 0; i < teams.length; i++) {
        var team = $.parseJSON(getTeam(teams[i]));
        if (team.ownerID === userID) {
            $(
                    "<option value='" + team.teamID + "'>" + team.teamName
                            + "</option>").appendTo('#teamSelection');
        }
    }
}

The #teamSelection is contained within the #teamSelect div. Any help would be great.

#teamSelection包含在#teamSelect div中。任何帮助都会很棒。

1 个解决方案

#1

Adding a callback function within .load() will solve the problem. Basically, you're telling it to load everything within that div before running the for loop.

在.load()中添加回调函数将解决问题。基本上,你告诉它在运行for循环之前加载该div中的所有内容。

$('#multiPurpose').load(
    'allTeams2.html #teamSelect',
    function() {
    for (i = 0; i < teams.length; i++) {
    var team = $.parseJSON(getTeam(teams[i]));
    if (team.ownerID === userID) {
    $(
    "<option value='" + team.teamID + "'>"
                                            + team.teamName + "</option>")
                                    .appendTo('#teamSelection');
                        }
                    }
                });