JSFiddle - React, Tailwind, and code Playground

by Erick Petrucelli

HTML

<select multiple="multiple" id="trainerFilter">
  <option value="firsttrainer">First Trainer</option>
  <option value="secondtrainer">Second Trainer</option>
</select>
<select multiple="multiple" id="recruitFilter">
  <option value="firstrecruit">First Recruit</option>
  <option value="secondrecruit">Second Recruit</option>
</select>
<select multiple="multiple" id="statusFilter">
  <option value="created">Created</option>
  <option value="inprogress">In Progress</option>
  <option value="complete">Complete</option>
</select>

<table id="reportsTable">
  <thead>
    <th>Report Number</th>
    <th>Date</th>
    <th>Name</th>
    <th>Trainer</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>12345-1</td>
      <td>05/01/2011</td>
      <td>First Recruit</td>
      <td>First Trainer</td>
      <td>Complete</td>
    </tr>
    <tr>
      <td>12345-2</td>
      <td>05/02/2011</td>
      <td>First Recruit</td>
      <td>Second Trainer</td>
      <td>In Progress</td>
    </tr>
    <tr>
      <td>54321-1</td>
      <td>05/03/2011</td>
      <td>Second Recruit</td>
      <td>First Trainer</td>
      <td>Created</td>
    </tr>
    <tr>
      <td>50381-1</td>
      <td>05/03/2011</td>
      <td>Second Recruit</td>
      <td>Second Trainer</td>
      <td>Created</td>
    </tr>
    <tr>
      <td>50381-1</td>
      <td>05/03/2011</td>
      <td>First Recruit</td>
      <td>Second Trainer</td>
      <td>Created</td>
    </tr>
  </tbody>
</table>

JavaScript

$("#trainerFilter").change(changeFilters);
$("#recruitFilter").change(changeFilters);
$("#statusFilter").change(changeFilters);

function changeFilters() {
    var trainer = $("#trainerFilter :selected").text();
    var recruit = $("#recruitFilter :selected").text();
    var status = $("#statusFilter :selected").text();

    $("#reportsTable tbody tr").show().hide();

    var trs = $("#reportsTable tbody tr");

    if (trainer) {
        trs = trs.filter(function (i) {
            return $("td:contains('" + trainer + "')", this).length;
        });
    }

    if (recruit) {
        trs = trs.filter(function (i) {
            return $("td:contains('" + recruit + "')", this).length;
        });
    }

    if (status) {
        trs = trs.filter(function (i) {
            return $("td:contains('" + status + "')", this).length;
        });
    }

    trs.show();
}