在下拉列表更改时隐藏数据网格行

Question

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

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

Answer 1

将select输入和datagrid设置为其值并为每个组设置id或classes - 因为您不清楚需要什么冒了一个使用id为每个table row设置示例的自由，没有什么可以阻止您而不是在列中包含所有元素的行中更改id到{{1}每个元素都有一行 - 一个简单的标记：

classes

每行必须初始化，并将CSS <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> 设置为display：

none

现在，我们需要在table tr{ display:none; } 值更改时触发change事件，以便我们可以显示正确的项目组：

select

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