根据下拉列表中的选择使用 jQuery 填充变量答案

【问题标题】：Populate a variable using jQuery based on selections in a drop down根据下拉列表中的选择使用 jQuery 填充变量
【发布时间】：2014-05-12 10:28:51
【问题描述】：

我正在尝试根据用户从下拉菜单中的选择在 jQuery 中构建一个嵌套数组。这将在以后的 JSON 请求中使用。

到目前为止，我的代码确实（几乎）产生了所需的结果，但是无论我从下拉菜单中选择选项的顺序如何，输出（我最后登录控制台）总是相同的。

  $('#comboGenre').change(function () {
     var values = $('#comboGenre').val();
     var parsedJSON = JSON.parse($data); //Data returned from ajax request
     for (var i = 0; i < values.length; i += 1) {
         $genreList = parsedJSON.genre[i];
         console.log($genreList);
     }
 });

因此，如果我从下拉列表中选择 RPG 和 Action，则输出为我提供 RPG 和驾驶。如果我选择 RPG、Driving 和 Action（按此顺序），我会得到我所期望的 RPG、Driving 和 Action。

所以它只是遍历我的 JSON，而实际上它应该返回“选定”选项。

我怎样才能做到这一点？

如果有用的话，我的 JSON 看起来像这样：

 {"genres": [{
        "genre": "RPG",
        "publishers": [{
            "publisher": "Square",
            "games": [{
                "game": "FFX",
                "rating": [
                    12, 15
                ]
            }]
        }]
    }, 
            {
        "genre": "Driving",
        "publishers": [{
            "publisher": "Turn10",
            "games": [{
                "game": "Forza",
                "rating": [
                    5
                ]
            }]
        }]        
    },
    {
        "genre": "Action",
        "publishers": [{
            "publisher": "EA",
            "games": [{
                "game": "COD",
                "rating": [
                    18, 20
                ]
            }]
        }]        
    }        
]}

编辑：

我也试过这个：

 $('#comboGenre').change(function () {
     var parsedJSON  = JSON.parse($data);
     $genreList = "";
     $.each(parsedJSON.genres, function(index, value){
     $genreList = parsedJSON.genres[index];
     console.log($genreList);
     });
 });

我最终得到了 JSON 中的所有对象，所以从这里开始，我只想将所选对象添加到 $genreList 变量中。

【问题讨论】：

那是多选框吗？而“驾驶”和“行动”是两个不同的选项？
是的，引导 UI
如果你创建了一个小提琴，它会非常有用 -> jsfiddle.net
这看起来对吗？ -> jsfiddle.net/lshettyl/CJPV5/1
您好，谢谢您，但不太好用。我当前的代码采用流派（以及它的所有子类型）并将其添加到变量（我稍后使用）。我已经尝试过这段代码，虽然它确实获得了选定的类型 - 它并没有带回它的所有孩子。只是名称“RPG”等。

标签： javascript jquery json

【解决方案1】：

如果您打破了一些逻辑并创建了一个类型查找函数并使用选定的字符串来查找正确的对象，那么您可以将对象放入稍后将使用的变量中。我做了一些检查以确保已选择的类型不在我的数组中，这是因为我正在使用多重选择

JSFiddle：http://jsfiddle.net/vkTFq/

代码：

$(function(){
var selectedGenres = []; 
var genres =[{"genre":"RPG","publishers":[{"publisher":"Square","games":[{"game":"FFX","rating":[12,15]}]}]},{"genre":"Driving","publishers":[{"publisher":"Turn10","games":[{"game":"Forza","rating":[5]}]}]},{"genre":"Action","publishers":[{"publisher":"EA","games":[{"game":"COD","rating":[18,20]}]}]}]
    $('#comboGenre').change(function() {

        $(this).find(":selected").each(function() {
            var selectedGenre = findGenre($(this).val())

            if (!genreAlreadySelected(selectedGenre.genre)) {
                selectedGenres.push(selectedGenre);
            };


        });
        console.log (JSON.stringify(selectedGenres));
    });

    function genreAlreadySelected(genre){
        for(var i = 0; i < selectedGenres.length; i++){
            if (genre == selectedGenres[i].genre) {
                return true;
            };
            return false;
        }
    }

    function findGenre(genre){
        for(var i = 0; i < genres.length; i ++){
            console.log(genre)
            if(genre == genres[i].genre){
                return genres[i];
            }
        }

    };


});

【讨论】：