JQuery - Два выпадающих меню

Question

У меня есть два раскрывающихся меню, которые отображают и скрывают элементы div в зависимости от выбранного вами варианта. Я хочу изменить классы div на tr-классы, но я не могу заставить его работать. Как мне переписать код jquery, чтобы он работал над tr-классами?

Вот следующий JSFiddle с кодом

Вот код JQuery, который я считаю, должны быть переписаны.

$("select.filterby").change(function(){ 
    var filters = $.map($("select.filterby").toArray(), function(e){ 
     return $(e).val(); 
    }).join("."); 
    $("div#FilterContainer").find("div").hide(); 
    $("div#FilterContainer").find("div." + filters).show(); 
}); 

Answer 1

HTML код:

<p>Filter: </p> 
      <select class="filterby"> 
      <option value="all"><h5>Show All</h5></option> 
      <option value="1"><h5>One</h5></option> 
      <option value="2"><h5>Two</h5></option> 
      <option value="3"><h5>Three</h5></option> 
      </select> 



     <p>Location: </p> 
     <select class="filterby"> 
     <option value="all"><h5>All Locations</h5></option> 
     <option value="nj"><h5>NJ</h5></option> 
     <option value="ny"><h5>NY</h5></option> 
     <option value="pa"><h5>PA</h5></option> 
     </select> 


    <table id="FilterContainer"> 
<tbody> 
    <tr><td class="all 1 nj">Test One NJ</td></tr> 
    <tr><td class="all 1 ny">Test One NY</td></tr> 
    <tr><td class="all 1 pa">Test One PA</td></tr> 
    <tr><td class="all 2 nj">Test Two NJ</td></tr> 
    <tr><td class="all 2 ny">Test Two NY</td></tr> 
    <tr><td class="all 2 pa">Test Two PA</td></tr> 
    <tr><td class="all 3 nj">Test Three NJ</td></tr> 
    <tr><td class="all 3 ny">Test Three NY</td></tr> 
    <tr><td class="all 3 pa">Test Three PA</td></tr> 
    <tr><td class="all 1 nj">Test One NJ</td></tr> 
    <tr><td class="all 1 pa">Test One PA</td></tr> 
    <tr><td class="all 1 pa">Test One PA</td></tr> 
    <tr><td class="all 2 nj">Test Two NJ</td></tr> 
    <tr><td class="all 2 ny">Test Two NY</td></tr> 
    <tr><td class="all 2 ny">Test Two NY</td></tr> 
</tbody> 
</table> 

JS код:

$("select.filterby").change(function(){ 
    var filters = $.map($("select.filterby").toArray(), function(e){ 
     return $(e).val(); 
    }).join("."); 
    $("table#FilterContainer").find("td").hide(); 
    $("table#FilterContainer").find("td." + filters).show(); 
}); 

Answer 2

Под "т.р. классов", я полагаю, вы имеете в виду Tr элементы с определенными классами, определяемых массиве фильтров.

Вы бы сделать свой DIV с идентификатором FilterContainer в таблицу

<table id="FilterContainer"> 
    <tr class="all 1 ng"><td>...</td></tr> 
    .... 
</table> 

и ваши селекторы будет выглядеть следующим образом:

$("#FilterContainer tr").hide(); 
$("#FilterContainer tr").show();