Question

I’ve got a basic table and would like to filter the table rows by few filters.

<select id="location">
   <option value="New York">New York</option>                             
   <option value="LA">LA</option> 
   <option value="Boston">Boston</option>  
</select>
<select id="last-name">
    <option>Last name</option>
    <option value="ABCDE">A-E</option>
    <option value="FGHIJ">F-J</option>
    <option value="KLMNO">K-O</option>   
    <option value="PQRST">P-T</option>
    <option value="UVWXYZ">U-Z</option>   
</select>
<table id="personnel">
    <thead>
       <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Location</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td class="firstname">Abel</td>
          <td class="lastname">Alpha</td>
          <td class="location">LA</td>
       </tr>
       <tr>
          <td class="firstname">Benny</td>
          <td class="lastname">Bravo</td>
          <td class="location">New York</td>
       </tr>
       <tr>
          <td class="firstname">Cindy</td>
          <td class="lastname">Charlie</td>
          <td class="location">Boston</td>
       </tr> 
   <tbody>
</table>

First filter I figured I could do something like this:

$(function() {    
    $('#location').change(function() { 
        $("#personnel td.location:contains('" + $(this).val() + "')").parent().show();
        $("#personnel td.location:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});​   

But with the first letter filter I would need some help.

Answer 1

Try this

$('#last-name').change(function() {
    var curr = $(this).val();
    $("#personnel td.lastname").each(function(){
        if(curr.indexOf($(this).text().substr(0,1)) != -1){  //Check if first letter exists in the drop down value
             $(this).parent().show();

        }else{
             $(this).parent().hide();
        }
    });

});

See the working fiddle

I am sure this can be improved to be more robust, but it should get you started