带有下拉框的jQuery过滤器，使用数据类型 [英] jQuery filter with drop down box using data-type

问题描述

我需要使用带有jQuery的下拉框来过滤表格的行。我无法弄清楚如何将选项的值与表行的数据类型联系起来。

HTML：

 < label for =filter> ;类型：其中/标签> 
< select id =filter> 
< option value =all>所有步骤< / option> 
< option value =standard>标准< / option> ; 
< option value =review>评论< / option> 
< / select> 
 
< table id =table> 
< tr id =oneclass =rowdata-type =standard> 
< td>标准< / td> 
< / tr> 
< tr id =oneclass =rowdata-type =review> 
< td>评论< / td> 
< / tr> 
< / table> 
  

JS：

  $（＃filter）。change（function（）{
 $（＃table）。find（data-type）.each（function（）{
 if（ $（this）.text（）！= $（＃filter）。val（））
 $（this）.hide（）; 
 else 
 $（this）.parent （）。show（）; 
 if（$（＃filter）。val（）==all）
 $（this）.show（）; 
}）; 
}）; 
  

这里的jQuery基于我迄今为止通过研究发现的内容拼凑而成。将data-type属性保留在表行中非常重要。

我对jQuery很新，所以一切都有帮助！

这是代码笔： http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111

解决方案

您可以使用 .val（）; <找到您选择的值/ p>

您将获得所需的所有行 .val（）以匹配 $（ '.row'）;

当你找到一个匹配全部隐藏所有行时，只显示你想要的东西，b / c计算机执行此操作如此快速似乎是即时的

  .each（function（index，element）{}）; 
  

现在你有一个过滤器

编辑：只需将循环移动到循环外部就可以了。

  $（。filter）。change（function（）{var filterValue = $（this）.val（）; var row = $（'。row'）; row.hide（）row.each（function（i，el）{if（$（el）.attr（'data- type'）== filterValue）{$（el）.show（）;}}）}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script> < label for =filter>类型：< / label>< select class =filterdata-tableId =table1> < option value =all>所有步骤< /选项> < option value =standard> Standards< / option> < option value =review>评论< / option> < option value =inspection> Inspections< / option> < option value =payment>付款< / option> < option value =document> Documents< / option>< / select>< table id =table1> < tr id =oneclass =rowdata-type =standard> < TD>标准< / TD> < / TR> < tr id =twoclass =rowdata-type =review> < TD>综述< / TD> < / TR> < tr id =threeclass =rowdata-type =inspection> < TD>检查< / TD> < / TR> < tr id =fourclass =rowdata-type =payment> < TD>支付与LT; / TD> < / TR> < tr id =fiveclass =rowdata-type =document> < TD>文件与LT; / TD> < / TR> < tr id =oneclass =rowdata-type =standard> < TD>标准< / TD> < / TR> < tr id =twoclass =rowdata-type =review> < TD>综述< / TD> < / TR> < tr id =threeclass =rowdata-type =inspection> < TD>检查< / TD> < / TR> < tr id =fourclass =rowdata-type =payment> < TD>支付与LT; / TD> < / TR> < tr id =fiveclass =rowdata-type =document> < td> Documents< / td>< / table>  

I need to filter through rows of a table using a drop-down box with jQuery. What I can't figure out how to do is how to relate the value of the options to the data-type of the table rows.

HTML:

<label for="filter">Type:</label>
<select id="filter>
    <option value="all">All Steps</option>
    <option value="standard">Standards</option>
    <option value="review">Reviews</option>
</select>

<table id="table>
    <tr id="one" class="row" data-type="standard">
        <td>Standard</td>
    </tr>
    <tr id="one" class="row" data-type="review">
        <td>Reviews</td>
    </tr>
</table>

JS:

$("#filter").change(function () {
$("#table").find(data-type).each(function () {
    if ($(this).text() != $("#filter").val()) 
        $(this).hide();
    else 
        $(this).parent().show();
    if ($("#filter").val() == "all") 
        $(this).show();
    });
});

The jQuery here is just pieced together based off of what I've found so far by researching around. It's important that I leave the data-type attribute in the table rows.

I'm pretty new to jQuery, so anything helps!

Here's the Code Pen: http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111

解决方案

You find you what value is selected by using .val();

You get all the rows you need that .val() to match against $('.row');

Loop all the rows when you find a match hide all, only then show what you want, b/c computer do this so fast seems instant

.each(function(index, element) {});

Now you have a filter

EDIT: just move the hide all outside of the loop should do it.

$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.row'); 
      
    row.hide()
    row.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();
         }
    })
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="filter">Type:</label>
<select class="filter" data-tableId="table1">
  <option value="all">All Steps</option>
  <option value="standard">Standards</option>
  <option value="review">Reviews</option>
  <option value="inspection">Inspections</option>    <option value="payment">Payments</option>
  <option value="document">Documents</option>
</select>

<table id="table1">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
  </tr>
   <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
</table>

这篇关于带有下拉框的jQuery过滤器，使用数据类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！