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 id s 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/