Hide datagrid row on dropdown change

Question

I have a data grid, which is populated with the data. Now on dropdown change, i need to hide some of the rows in data grid.

E.g. data grid has value #dgNew

Apple
Banana
Orange
Football
BaseBall
IceCream
Pie

<b>Dropdownvalue #ddlCheck</b>:
Fruits(1)
Sports(2)
Deserts(3)

Now when we select fruits all other value should be hidden. If we select sports only sport related value should be visible.

How can we do this through jquery/javascript on client side?

Answer 1

Having your select input and datagrid set with its values and ids or classes set for each group - since you wasn't clear about what is needed I took the liberty of setting up an example using id for each table row, nothing stops you from instead of changing id in rows that have all elements from the group in columns to classes and a row for each element - a simple markup:

<select id="dgNew">
  <option value="0">...</option>
  <option value="1">fruits</option>
  <option value="2">sports</option>
  <option value="3">desserts</option>
</select>
<table>
  <tr id="1">
    <td>apple</td>
    <td>banana</td>
    <td>Orange</td>
  </tr>
  <tr id="2">
    <td>baseball</td>
    <td>football</td>
  </tr>
  <tr id="3">
    <td>icecream</td>
    <td>pie</td>
  </tr>
</table>

Every row must be initialized with CSS display set to none:

table tr{
  display:none;    
}

Now we need the change event to fire when the select value is changed so we can display the correct group of items:

$("#dgNew").change(function(){    
   $('table tr').css("display","none");
   if($("#dgNew").val() > 0)
   {        
      $('#'+$("#dgNew").val()).css("display","block");
   }
});

Example FIDDLE: http://jsfiddle.net/qPfJ6/1/