Question

我有一些JSON格式如下：

"games": [{
    "gameType": "RPG",
    "publishers": [{
        "publisher": "Square",
        "titles": [{
            "title": "Final Fantasy",
            "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ]
        }]
    }]
}]

我有一个下拉菜单，允许用户选择游戏类型，并填充另一个下拉菜单。因此，如果用户从下拉列表中选择RPG，则当用户选择Square时，发布者下拉列表将显示“Square”，标题下拉列表将显示“最终幻想”，当选择最终幻想时，日期范围将在相关下拉列表中选择。

目前我的游戏类型下拉加载正常，问题在于填充后续下拉菜单。这是我填充第一个下拉列表的代码：

profileSelected: function () {
    var myUrl = "webapp/jsonaccount=" + accountcode;
    $.ajax({
        url: myUrl,
        type: "POST",
        dataType: "text",
        success: function(data) {
            var info = JSON.parse(data); //parse the returned data
            var getType = _.pluck(info.games, 'gameType'); //select the game types from the JSON
            var prepareType = _.map(getType, function(val){ return '<option>'+val + '</option>';}).join(); //create the to be added to the combobox

            $('select#gameTypeCombo').html(prepareType).selectpicker('render'); //render the box
            $('select#gameTypeCombo').selectpicker('refresh'); //refresh the box
            $('select#gameTypeCombo').on('change', function() { //when gameType is chosen do this
                //Populate publisher based on GameType: (select#publisher)
                // When publisher is selected populate Titles: (select#gameTypeCombo)
                // When titles is selected populate gameReleases: (select#releaseDates)
            })
        }
    })
}

我的修正案是将此添加到更改功能以填充发布者（没有达到标题，因为这不起作用）：

$('select#gameTypeCombo').on('change', function() {
    var getPublisher = _.pluck(info.games.gameType, 'publisher');
    var preparePublisher = _.map(getPublisher, function(val){ return '<option>' + val + '</option>';}).join();  
    $('select#publisher').html (preparePublisher).selectpicker('render');                          
})

我的第一个想法是，这是因为它在我的AJAX请求中 - 这可能并不理想，但它是通过JSON。但是，当我再次通过游戏类型时，它起作用了。

所以我认为我的问题在于发布商依赖于标题，而我的代码不知道要返回哪个发布者。我调查了变量但没有用，不知道从哪里开始。

感谢任何建议。

- 编辑 -

我改变了

var getPublisher = _.pluck(info.games[0].gameType, 'publisher');

因此，通过添加[0] i实际上返回的数据是有意义的，但是要开始硬编码，我希望它可变，具体取决于之前的下拉菜单。

Answer 1

我已设法解决您的查询。

在适当填充数据之后，这是一堆嵌套的.change()函数调用。如果您需要帮助理解辅助函数，我将添加注释。：）

您可以在此处查看：JSFiddle

请原谅糟糕的格式。您可以将JS复制到您喜欢的文本编辑器并验证正在执行的操作。希望它有所帮助。

选择嵌套的JSON对象并填充下拉列表

1 个答案: