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>

我一直在使用这个模型并取得成功，所以除非有拼写错误，否则它应该有效，请让我知道。

如何使用Select过滤JSON表

1 个答案: