jquery - 从类别下拉菜单加载 json 数据

Question

我正在尝试从下拉类别列表加载 json 数据，其结果将显示在 HTML div 区域中。下拉菜单我如下 <

div id="content-1">
       <select>
    <optgroup label="Games">
        <option>PC</option>
        <option>Wii</option>
        <option>Xbox</option>
        <option>PS3</option>
        <option>PS4</option>
    </optgroup>
    <optgroup label="Consoles">
        <option>PS3</option>
        <option>PS4</option>
        <option>PS3</option>
        <option>Xbox</option>
    </optgroup>
   </select>
 </div>

这些选项存在于声明为类别的 json 文件中，如 PRproducts.json 文件中所示

{
"games":
 [
    {
    "id":"P001",
    "title":"Call of Duty - Ghosts",
    "category":"PC",
    "genre":"Action Multiplayer Game",
    "developed":"Ubisoft",
    "imgpath":"images/thumb/Call of Duty Ghosts(PC).jpg",
    "released": "November 2013",
    "price":45.00,
    "quantity":4
    },
    {
    "id":"P002",
    "title":"Assassins Creed IV - Black Flag",
    "category":"PC",
    "genre":"Action Adventure Game",
    "developed":" Ubisoft",
    "imgpath":"images/thumb/Assasins Creed Black Flag (PC).jpg",
    "released": "October 2013",
    "price":45.00,
    "quantity":4
    },
    {
        "id":"P003",
    "title":"Total War: Rome II",
    "category":"PC",
    "genre":"Strategy Game",
    "developed":"Creative Assembly",
    "imgpath":"images/thumb/Rome Total War II.jpg",
    "released": "September 2013",
    "price":42.00,
    "quantity":4
     },
     {
     "id":"P004",
    "title":"Battlefield 4",
    "category":"PC",
    "genre":"First Person Action Game",
    "developed":"Electronic Arts",
    "imgpath":"images/thumb/Battlefield 4.jpg",
    "released":"October 2013",
    "price":39.99,
    "quantity":4
    },
    {
        "id":"P005",
    "title":"Call of Duty - Black Ops",
    "category":"Wii",
    "genre": "Action Game",
    "developed":"Ubisoft",
    "imgpath":"images/thumb/Call of Duty Black Ops(Wii).jpg",
    "released": "November 2013",
    "price":45.00,
    "quantity":4
    }
 ]
}

下面是我打开页面时必须显示所有产品的代码

var objGames;   

 $(document).ready(function(){

    /*alert("before getJSON");*/

     $.getJSON('PCproducts.json',null, function(data){

        /*alert("help");*/

        objGames = data;


        var output = '<div id="row">';

        /*  var count = 1;*/
            $.each(objGames.games, function (key, val) {

                output += '<div id="Container">';
                output += '<div id="img-area"><img id="img" src="'+val.imgpath+'" alt="'+ val.title +'" /></div>';
                output += '<div id="Box1">';
                output += '<h2>' + val.title + '</h2>';
                output += '<p>Category:' + val.category + '</p>';
                output += '<p>Developer:' + val.developed + '</p>';
                output += '<p>Genre:' + val.genre + '</p>';
                output += '<p>Released on:' + val.released + '</p>';
                output += '<p>Euro: ' + val.price + '</p>';
                output += '<p>Quantity: ' + val.quantity + '</p>';
                output += '<p><input data-item="'+ val.id +'" type="submit" value="Add to cart" class="btn" /></p>'
                output += '</div>';
                output += '</div>';
                /*if(count%2 == 0){
                  output += '</div><div id="row">'
                  }
                  count++;*/

            });
             output += '</div>';

            /*output += '</div>';*/
            $('#content-2-1').html(output);     // replace all existing content       

我的问题是，我对如何使 Jquery 代码显示所需的项目感到困惑，也就是说，如果按下 PC 选项，则仅显示 PC 游戏，如果按下 Wii 选项，则显示 Wii 游戏仅等等，并没有显示所有产品。有人可以帮我解决我的问题吗，因为我真的被困住了，不知道该怎么办。

Answer 1

不确定您到底想做什么，但这是隐藏选项的一种方法:

http://jsfiddle.net/Kb7zL/

HTML:

PS3<input type="checkbox" name="ps3" checked> PS4<input type="checkbox" name="ps4" checked>
<select>
    <optgroup class="ps3">
        <option value="Crash Bandicoot">Crash</option>
        <option value="Metal Gear">MGS</option>
    </optgroup>
    <optgroup class="ps4">
        <option value="Crash Bandicoot">Crash</option>
        <option value="Metal Gear">MGS</option>
    </optgroup>
</select>

JS:

$(document).on('change', 'input[type="checkbox"]', function(){
    var target = $(this),
        name = target.attr('name');

    $('.hideStuff').removeClass('hideStuff');

    if(!target.is(':checked')){
        $('optgroup.'+name).children().addClass('hideStuff');
    }
})

CSS:

.hideStuff{
    display:none;
}