JSFiddle - React, Tailwind, and code Playground

by Boopathi Rajan

HTML

<select id="first">
    <option>Show all</option>
    <option>raja</option>
    <option>john</option>
</select>

<select id="second">
    <option>Show all</option>
    <option>english</option>
    <option>tamil</option>
</select>

<table border="1" id="test">
    <thead>
        <th>Name</th>
        <th>subject</th>
        <th>mark</th>
    </thead>
    <tbody>
    <tr>
        <td>raja</td>
        <td>english</td>
        <td>85</td>
   </tr>
 <tr>
        <td>raja</td>
        <td>tamil</td>
        <td>80</td>
   </tr>
         <tr>
        <td>john</td>
        <td>english</td>
        <td>95</td>
   </tr>
         <tr>
        <td>john</td>
        <td>tamil</td>
        <td>90</td>
   </tr>
    </tbody>
</table>

JavaScript

$('#first').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();

    rows.filter(":contains('" + select + "')").show();

});

$('#second').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();

    rows.filter(":contains('" + select + "')").show();
});