javascript - 如何使用 Select 筛选 JSON 表

Question

我有一个由 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"
    }
  ]
}

选择菜单:

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

表格

<table id =myTable class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
          <th>Description</th>
          <th>Image</th> 
        </thead>
        </table>
      </table>

表格脚本

$.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");
});

Answer 1

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

为此，首先通过更改行 items.push("<tr>") 来标识具有数据类别属性的每一行有了这个:

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>

我一直在成功地使用这个模型，所以除非有拼写错误，否则它应该可以工作，否则请告诉我。