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

Question

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

Answer 1

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> 

Answer 2

You can modify your js function to

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

Please see this working Fiddle .

Answer 3

In Addition to @wlin's Answer For "All" value in dropdown.

 $("#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>