Question

我正在尝试从下拉类别List中加载json数据，结果将显示在HTML div区域中。下拉列表如下＆LT;

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>

选项存在于声明为category的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;
}

Answer 2

使用.val()获取所选的下拉列表值。假设您的下拉列表标识为#cat-select：

var selected_category = $('#cat-select').val();

然后在您的显示循环中，如果该元素不属于过滤类别

，则跳过该元素

$.each(objGames.games, function (key, val) {
  if(val.category != selected_category) {
    continue;
  }
  ...
  // further code to render here
}

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

2 个答案: