Javascript 如何使用Select筛选JSON表

我有一个由JSON表中的数据填充的表，我希望能够根据选择菜单中的选项过滤该表。我该怎么办

JSON文件的格式是这样的，类别有不同的数字

"products" : [
{
  "id" : "0",
  "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - 
   UK-Layout",
  "price" : "119.99",
  "category" : "0",
  "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical 
   Gaming Keyboard - Black.",
  "button" : "<button type='button'>Add</button>",
  "input" : "<input type='text' name='quantity'>",
  "images" : [
    {
      "id" : "0",
      "src" : "images/00.jpg"
    },
    {
      "id" : "1",
      "src" : "images/01.jpg"
    },
    {
      "id" : "2",
      "src" : "images/02.jpg"
    }
  ]
}

“产品”：[
{
“id”：“0”，
“名称”：“罗技G910猎户座光谱RGB机械游戏键盘-
英国版式“，
“价格”：“119.99”，
“类别”：“0”，
“说明”：“罗技920-008017 G910猎户座光谱RGB机械
游戏键盘-黑色。“，
“按钮”：“添加”，
“输入”：“，
“图像”：[
{
“id”：“0”，
“src”：“images/00.jpg”
},
{
“id”：“1”，
“src”：“images/01.jpg”
},
{
“id”：“2”，
“src”：“images/02.jpg”
}
]
}

选择菜单：

`<select id= "dropDown">
 <option value="">All</option>
 <option value="0">Mice</option>
 <option value="1">Keyboard</option>
 <option value="2">Monitor</option>
 </select>`

`
全部的
老鼠
键盘
班长
`

桌子

身份证件
名称
价格
描述
形象

表的脚本

$.getJSON('products.json', function(data){
  var items = [];
  $.each(data.products, function(key, val){
    items.push("<tr>");
    items.push("<td id=''"+key+"''>"+val.id+"</td>");
    items.push("<td id=''"+key+"''>"+val.name+"</td>");
    items.push("<td id=''"+key+"''>"+val.price+"</td>");
    items.push("<td id=''"+key+"''>"+val.description+"</td>");
    items.push("<td id=''"+key+"''>"+"<img src='"+val.image+"'/></td>");

    items.push("</tr>");
  });

  $("<tbody/>", {html:items.join("")}).appendTo("table");
});

$.getJSON（'products.json'，函数（数据）{
var项目=[]；
$.each（数据、产品、功能（键、值）{
项目。推送（“”）；
items.push（“+val.id+”）；
items.push（“+val.name+”）；
项目推送（“+val.price+”）；
items.push（“+val.description+”）；
items.push（“+”）；
项目。推送（“”）；
});
$（“”，{html:items.join（“”}）.appendTo（“表”）；
});

我将使用数据属性来过滤所需的行

为此，首先通过更改行

项来标识具有数据类别属性的每一行。使用以下命令推送（“”）

：

items.push("<tr data-category='"+val.category+"'>");

要调用该函数，请执行以下操作：

function filterByCategory(obj){
    var id = $(obj).val(); // get currently selected value
    $('tr[data-category]').hide(); // first hide all rows
    $('tr[data-category='+id+']').show(); // show only those rows with the requested category id
}

<select id="dropDown" onchange="javascript:filterByCategory(this)">
 <option value="">All</option>
 <option value="0">Mice</option>
 <option value="1">Keyboard</option>
 <option value="2">Monitor</option>
</select>

全部的
老鼠
键盘
班长

---

我一直在成功地使用这个模型，所以除非有输入错误，否则请告诉我其他情况。

实际上，唯一的问题是返回“全部”不会在表中显示任何内容。是否有方法将“选择”中的“全部”值设置为多个值，以便表中显示所有数据？添加一个if条件以询问如果该值等于“”，则使用$（tr[date category]”显示所有行。改为显示（）。

<select id="dropDown" onchange="javascript:filterByCategory(this)">
 <option value="">All</option>
 <option value="0">Mice</option>
 <option value="1">Keyboard</option>
 <option value="2">Monitor</option>
</select>