在下拉更改时隐藏数据网格行答案

【问题标题】：Hide datagrid row on dropdown change在下拉更改时隐藏数据网格行
【发布时间】：2014-04-23 17:09:09
【问题描述】：

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

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 做到这一点？

【问题讨论】：

标签： javascript jquery drop-down-menu datagrid

【解决方案1】：

让您的select 输入和datagrid 设置其值并为每个组设置ids 或classes - 因为您不清楚需要什么，所以我冒昧地设置了一个示例对每个 table row 使用 id，没有什么能阻止您，而不是将行中的 id 更改为包含列中组中的所有元素的行中的 classes 和每个元素的一行 - 一个简单的标记：

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

每一行都必须用 CSS 初始化 display 设置为 none：

table tr{
  display:none;    
}

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

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

FIDDLE 示例：http://jsfiddle.net/qPfJ6/1/

【讨论】：