html - Using jQuery to filter a table from multiple select elements -

i want filter table using jquery hide/show based on user selects multiple select elements.

i want user able select multiple values 1, 2 or 3 of select elements. maybe they'll select 2 trainers, 1 recruit , 1 status, or maybe 1 trainer. planning on creating function run when user clicks of options.

the way see it, each select element have array of values user has selected. i'll need loop through each array , compare text in specific column. easy enough if options 1 select element. since 1, 2 or 3, i'm having trouble getting head around it.

any appreciated.

table:

<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>   </tbody> </table> 

selects:

<select multiple="multiple" name="trainerfilter">   <option value="firsttrainer">first trainer</option>   <option value="secondtrainer">second trainer</option> </select> <select multiple="multiple" name="recruitfilter">   <option value="firstrecruit">first recruit</option>   <option value="secondrecruit">second recruit</option> </select> <select multiple="multiple" name="statusfilter">   <option value="created">created</option>   <option value="inprogress">in progress</option>   <option value="complete">complete</option> </select> 

looks can't post answer question 8 hours came @spencer ruport. ended being lot more convoluted expected having account possible entries. user select first select element, nothing second, , maybe 2 third. or maybe user doesn't select first , 2 second. given input, there may 6+ filters need applied.

i'm sure there's better way this, , looks @alison may have linked one, works.

    function filterreports() {         $('.report').hide(); //set rows hidden.         trainervals = $('#trainerfilter').val();         recruitvals = $('#recruitfilter').val();         statusvals = $('#statusfilter').val();         if (trainervals) { //check if trainers selected.             $.each(trainervals, function(index, trainer) {                 filtered = false;                  classstring = '';                 classstring += '.' + trainer;                 if (recruitvals) { //check if trainers , recruits selected.                     $.each(recruitvals, function(index, recruit) {                         filtered = false;                         secondstring = '';                          secondstring = classstring + '.' + recruit; //concat new string keep old 1 intact.                         if (statusvals) { //check if trainers, recruits , statuses selected.                             $.each(statusvals, function(index, status) {                                 filtered = false;                                 finalstring = '';                                 finalstring += secondstring + '.' + status; //again concat new string.                                 $(finalstring).show();                                 filtered = true; //by setting filtered true, run show once.                             });                         }                         if (!filtered) { //if trainers , recruits selected, not status, need apply filter.                             $(secondstring).show();                             filtered = true;                         }                     });                 }                 if (!filtered && statusvals) { //if trainers , statuses selected, go through those.                     $.each(statusvals, function(index, status) {                         filtered = false;                         finalstring = '';                         finalstring += classstring + '.' + status;                         $(finalstring).show();                         filtered = true;                     });                 }                 if (!filtered) { //if trainers selected, apply filter.                     $(classstring).show();                     filtered = true;                 }             });         }         if (!filtered && recruitvals) { //if trainers not selected, recruits are, run through recruits.             $.each(recruitvals, function(index, recruit) {                 classstring = '';                 classstring += '.' + recruit;                 if (statusvals) { //check if recruits , statuses selected                     $.each(statusvals, function(index, status) {                         finalstring = '';                         finalstring += classstring + '.' + status;                         $(finalstring).show();                         filtered = true;                     });                 }                 if (!filtered) { //if recruits selected, apply filter.                     $(classstring).show();                     filtered = true;                 }             });         }         if (!filtered && statusvals) { //if both trainers , recruits not selected, statuses are, run through those.             $.each(statusvals, function(index, status) {                 classstring = '';                 classstring += '.' + status;                 $(classstring).show();                 filtered = true;             });         }         if (!filtered) {             //no filters selected.         }         $("tr").removeclass("even"); //remove current zebra striping.         $("tr:visible:even").addclass("even"); //add zebra striping rows visible.     } 

this pretty simple using multiple classes (i call them markers when they're not being used styles.)

<table>   <thead>     <th>report number</th>     <th>date</th>     <th>name</th>     <th>trainer</th>     <th>status</th>   </thead>   <tbody>     <tr class="obj_first_recruit obj_first_trainer obj_complete obj_row_item">       <td>12345-1</td>       <td>05/01/2011</td>       <td>first recruit</td>       <td>first trainer</td>       <td>complete</td>     </tr>     <tr class="obj_first_recruit obj_second_trainer obj_in_progress obj_row_item">       <td>12345-2</td>       <td>05/02/2011</td>       <td>first recruit</td>       <td>second trainer</td>       <td>in progress</td>     </tr>     <tr class="obj_second_recruit obj_first_trainer obj_created obj_row_item">       <td>54321-1</td>       <td>05/03/2011</td>       <td>second recruit</td>       <td>first trainer</td>       <td>created</td>     </tr>   </tbody> </table> 

then anytime want filter concatenate corresponding markers periods example:

$(".obj_row_item").hide(); $(".obj_first_recruit.obj_second_trainer.obj_in_progress").show(); 

for simplicity's sake can make values of dropdowns correspond marker names making statement like:

$("." + $("#dropdown1").val() + "." + $("#dropdown2").val() + "." + $("#dropdown3").val()).show();