javascript - 如何附加到另一个页面上的选择下拉列表？

Question

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

代码：

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');
        }
    }
}

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

Answer 1

在 .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');
                        }
                    }
                });