Question

DropDownList items

a
b
c

GridView

X | B | C | D | E
a | 1 | 2 | 3 | 4
b | 2 | 2 | 2 | 2
c | 3 | 3 | 3 | 3

---

When DropDownList.SelectedItem = a

Hide GridView.Rows = b & c

---

When DropDownList.SelectedItem = b

Hide GridView.Rows = a & c

---

and so on

---

Anyone know the javascript for doing this client-side?

Answer 1

Assuming the dropdownlist’s id is alpha and the gridview’s tbl, you can do it this way:

$(document).ready(function(){
  $("#alpha").change(function(){
    var selVal = $(this).find(":selected").text();   
   var rows =   $("#tbl tr:gt(0)");    
    if (selVal == "ALL") {           
       $("#tbl tr").show();          
    }
    else {        
       var rowToShow = rows.find("td:eq(0)").filter(":contains(" + selVal + ")").closest("tr");
    rows.show().not( rowToShow ).hide();
    }
  });   
});

Here is an example in JS BIN