隱藏下拉更改的數據網格行

我有一個數據網格，它填充了數據。現在在下拉更改，我需要隱藏數據網格中的一些行。隱藏下拉更改的數據網格行

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來做到這一點？

來源

2014-04-23 Aditya

有你select輸入和datagrid設置有它的價值觀和id S或classes爲每個組設置 - 既然你是不是清楚需要什麼我把設置使用id爲例每個table row，沒有什麼的自由阻止你的，而不是在有從列組classes所有元素，併爲每個元素的一行行改變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>

每一行必須用CSS display組被初始化爲none：

table tr{ 
    display:none;  
}

現在我們需要change事件，火災時select值改變，所以我們可以顯示正確的項目組：

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

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

來源

2014-04-23 18:40:28

隱藏下拉更改的數據網格行

回答

相關問題