JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<table id='animal'>
  <tr class="cat">
    <td>cats</td>
  </tr>
  <tr class="cat">
    <td>cats</td>
  </tr>
  <tr class="dog">
    <td>dogs</td>
  </tr>
  <tr class="bird">
    <td>birds</td>
  </tr>
  <tr class='dog'>
    <td>dogs</td>
  </tr>
</table>
<select id="selectFilter">
  <option value=''>Select...</option>
  <option value='cat'>Cats</option>
  <option value='dog'>Dogs</option>
  <option value='bird'>Birds</option>
</select>

JavaScript

$('#selectFilter').change(function(){
    var trs = $('#animal tr');
    if(this.value == ''){
         trs.show(); 
    }else{
       var $el = $('.'+this.value);
       trs.not($el).hide();
       $el.show();       
    }
});