Ordenar una tabla por valores desplegables (simplificar mi código)

Question

Jan 25, 2013, 09:30 PM

javascript drop-down-menu jquery select filter

Ordenar una tabla por valores desplegables (simplificar mi código)

Tengo una mesa Quiero que el usuario pueda filtrar la tabla por la opción que elija en un menú desplegable determinado. Lo tengo funcionando, pero es complicado y es difícil agregar nuevas filas con (no puedo hacer que funcione en jsfiddle, lo siento)http://jsfiddle.net/anschwem/Y4cf6/2/). Cualquier código simplificado sería muy apreciado. Además, sería bueno si este código pudiera limitarse a solo filtrar una determinada tabla, de modo que pueda tener muchas tablas y muchos menús desplegables. Si esto pudiera hacerse sin identificadores de fila, aún mejor. ¡Gracias!Mi tabla / html:

<table>
<tr id="catRow">
  <td id="cats">cats</td>
</tr>
<tr id="catRow2">
  <td id="cats">cats</td>
</tr>
<tr id="dogRow">
  <td id="dogs">dogs</td>
</tr>
<tr id="birdRow">
  <td id="birds">birds</td>
</tr>
<tr>
  <td id="dogRow2">dogs</td>
</tr>
</table>

                <select id="selectFilter">
                <option id="sel_All">Select...</option>
                <option id="selCats">Cats</option>
                <option id="selDogs">Dogs</option>
                <option id="selBirds">Birds</option>
                </select>

Código:

   <script type='text/javascript'> 
    $(window).load(function(){
     $('select').change(function() {

  if($('#selectFilter option:selected').attr('id') == "sel_All" || $('#selectFilter option:selected').attr('id') == "sel_All"){$('#catRow').show();$('#catRow2').show();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').show();}

  if($('#selectFilter option:selected').attr('id') == "selCats" || $('#selectFilter option:selected').attr('id') == "selCats"){$('#catRow').show();$('#catRow2').show();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').hide();}

  if($('#selectFilter option:selected').attr('id') == "selDogs" || $('#selectFilter option:selected').attr('id') == "selDogs"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').hide();}

  if($('#selectFilter option:selected').attr('id') == "selBirds" || $('#selectFilter option:selected').attr('id') == "selBirds"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').show();}
    </script>