循环通过基于Drop Downs的嵌套JSON对象

时间:2014-03-14 10:08:48

标签: javascript jquery json backbone.js

我正在尝试迭代嵌套的JSON对象,并在不同的选择框中返回值。

这是我的JSON:

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

因此,当选择RPG时,发布者下拉列表会显示Square等。

目前我在做:

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

其中填充了发布者框 - 但是当我使用[0]时,只选择了第一个,并且无法填充后续的下拉菜单。

我一直在关注$ .each但无法让它发挥作用。

任何建议表示赞赏

1 个答案:

答案 0 :(得分:1)

这是a working fiddle根据第一个选择的值填充第二个选择:

var info = {
    "games": [{
        "gameType": "RPG",
        "publishers": [{
            "publisher": "Square"
        }]
    },{
        "gameType": "Other",
        "publishers": [{
            "publisher": "Someone"
        }]
    }]
};

$('select#gameTypeCombo').on('change', function(e) {
    var $elem = $(this);
    var index = $elem.val();
    var getPublisher = _.pluck(info.games[index].publishers, 'publisher');
    var preparePublisher = _.map(getPublisher, function(val){ return '<option>' + val + '</option>';}).join();  
    $('select#publisher').html (preparePublisher);                          
});