带有带数据类型的下拉框的jQuery过滤器

Question

我需要使用带有jQuery的下拉框过滤表的行。我不知道该怎么做是如何将选项的值与表行的数据类型相关联。

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();
    });
});

根据我到目前为止的研究，这里的jQuery只是拼凑而成。将数据类型属性保留在表行中很重要。

我对jQuery很陌生，所以任何帮助！

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

Answer 1

您会发现您通过使用选择了什么值 .val();

您将获得需要.val()匹配的所有行$('.row');

当找到匹配项时，将所有行循环显示，然后全部隐藏，然后显示您想要的内容，b / c计算机如此快速地执行此操作似乎是即时的

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

现在您有了一个过滤器

编辑：只需将隐藏全部移到循环外即可。

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