Javascript 在下拉列表更改时隐藏datagrid行

我有一个数据网格，其中填充了数据。现在在下拉列表更改中，我需要隐藏数据网格中的一些行

E.g. data grid has value #dgNew

Apple
Banana
Orange
Football
BaseBall
IceCream
Pie

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

现在，当我们选择水果时，所有其他值都应该隐藏。如果选择“运动”，则只应显示与运动相关的值

我们如何通过客户端的jquery/javascript实现这一点？

设置select输入和datagrid，并为每个组设置其值和id或类-由于您不清楚需要什么，我冒昧地为每个表行设置了一个使用id的示例，没有任何东西可以阻止您更改行中的id，这些行中的所有元素从组中的列到类，每个元素都有一行-一个简单的标记：

<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>

现在，我们需要在更改select值时触发change事件，以便显示正确的项目组：

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

小提琴示例：

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