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

哈格巴德

我有一些像这样的JSON格式:

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

我有一个下拉菜单,允许用户选择游戏类型,并将填充另一个下拉菜单。所以,如果从下拉用户选择RPG,在选择最终幻想出版商下拉显示“广场”,当用户选择广场,标题下拉会显示“最终幻想”,日期范围将是可选在相关下拉列表中。

目前,我的“游戏类型”下拉列表加载正常,问题在于填充后续的下拉列表。这是我的代码,用于填充第一个下拉列表:

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

我的修正是将其添加到change函数中以填充发布者(开始时标题不尽人意):

$('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]我实际上得到了返回的数据,这是有道理的,但是要开始进行硬编码,我希望它根据之前的下拉列表是可变的。

瓦拉格劳瓦尔

我已经设法解决了您的查询。

.change()在适当填充数据之后,所有的嵌套函数调用都是一堆如果您在了解帮助器功能方面需要帮助,我将添加注释。:)

您可以在这里看看:JSFiddle

不好意思的格式。您可以将JS复制到您喜欢的文本编辑器并验证正在执行的操作。希望能帮助到你。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 json 为嵌套的 java 对象和列表填充下拉列表

来自分类Dev

下拉列表未填充json对象

来自分类Dev

Jquery 3.3.1 从 JSON 对象填充下拉列表

来自分类Dev

从JSON填充下拉列表

来自分类Dev

从JSON填充下拉列表

来自分类Dev

根据选择填充下拉列表

来自分类Dev

使用JSON数组中的键填充选择下拉列表

来自分类Dev

使用jQuery在不同的下拉列表中显示嵌套的JSON对象

来自分类Dev

从AngularJS中的json对象绑定选择下拉列表

来自分类Dev

如何使用angular随对象一起从对象中填充选择下拉列表。

来自分类Dev

使用Vue.js中的唯一值填充嵌套对象数组的下拉列表

来自分类Dev

填充对象列表中的选择

来自分类Dev

根据更改事件填充选择下拉列表

来自分类Dev

在angularjs中填充下拉列表选择

来自分类Dev

从MySql和Php填充下拉列表选择

来自分类Dev

来自对象laravel的角度填充下拉列表

来自分类Dev

如何从嵌套对象创建动态下拉列表

来自分类Dev

基于ASP.NET MVC中的复选框选择填充模型的嵌套列表对象

来自分类Dev

从逗号分隔的JSON对象中填充具有不同值的html下拉列表

来自分类Dev

Angular js使用JSON填充下拉列表

来自分类Dev

解析json并通过jquery填充下拉列表

来自分类Dev

使用JSON数据动态填充下拉列表

来自分类Dev

Angular js使用JSON填充下拉列表

来自分类Dev

GORM:将列表填充到选择下拉列表中

来自分类Dev

检查选择下拉列表中是否存在选项(来自 Json 对象)

来自分类Dev

如何从下拉列表中选择的值填充JavaScript数组?

来自分类Dev

在mvc中选择下拉列表填充文本框

来自分类Dev

选择下拉列表后自动填充Infopath表单

来自分类Dev

选择一个由mysql填充的下拉列表的值

Related 相关文章

热门标签

归档