帶有下拉框的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只是根據我迄今為止通過研究發現的內容拼湊而成。 將data-type屬性保留在表行中非常重要。

我是jQuery的新手，所以一切都有幫助！

這是代碼筆： http ： //codepen.io/aburnsworth/pen/XKzgqa？ editors = 1111

Answer 1

您可以使用.val();找到選擇的值.val();

您將獲得所需的所有行.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">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> 

Answer 2

您可以將js功能修改為

$(document).ready(function() {
       var $rows = $('table tr');
       $("#filter").change(function() {

           var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
               reg = RegExp(val, 'i'),
               text;
           if ($(this).val() !== 'all') {

               $rows.show().filter(function() {
                   text = $(this).data('type').replace(/\s+/g, ' ');
                   return !reg.test(text);
               }).hide();

           } else {
               $rows.show();
           }
       });
   });

請看這個工作小提琴 。

Answer 3

除了@ wlin的答案中，下拉列表中的“全部”值。

 $("#filter").change(function() { console.clear(); var filterValue = $(this).val(); var row = $('.row'); row.each(function(i, el) { if ($(el).attr('data-type') == filterValue) { row.hide() $(el).show(); } }); // In Addition to Wlin's Answer (For "All" value) if ("all" == filterValue) { row.show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <label for="filter">Type:</label> <select id="filter"> <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="table"> <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> </table>