Question

I have this table which has seven columns, each column representing a specific value like so:

I also have five select boxes containing options which I want to use for filtering this data table.

So far, I have come up with this:

$('#mySelectBox').change(function() {

  var filtervar = $(this).val();

  $('tr td.someclass').each(function () {
      if ($(this).text() != filtervar) {
          $(this).parent().hide();
      } else {
          $(this).parent().show(); 
      }
  });
});

This code works for one selectbox. How can I tweak it so that I can use five different selectboxes for filtering?

Answer 1

It is already generic enough. Just change the select box from having ids to classes and target all select boxes with the proper class.

---

Script:

$('.filter').change(function() { /* ... code ... */ });

HTML:

<select class="filter"> ... </select>
<select class="filter"> ... </select>
<select class="filter"> ... </select>