Question

72

jQuery filter with drop down box using data-type

rated 0 times [ 75] [ 3] / answers: 1 / hits: 22299 / 8 Years ago, tue, july 12, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katieh

Add To Favorites

Follow

Total Points: 692

Total Questions: 104

Total Answers: 104

Location: Armenia

Member since Sat, Dec 31, 2022

1 Year ago

answered 8 Years ago josefn · Accepted Answer

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>