使用數據類型的下拉框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) {}); 

現在你有一個過濾器

編輯：只要移動隱藏所有外面的循環應該做到這一點。

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

請參閱該工作Fiddle。

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>