Javascript Hide Multiple Gridview Rows

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

Solution 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

Solution 2:

Sharing a sub-pseudo code below:

Array listFromGridView = [a,b,c];

// get parent dropdownbox and save for future referencevar drop=$("#dropdownBoxID);

drop.bind('click',function(e){ 

// get all element in an array
Array tempList= listFromGridView;

// remove the element which was clicked
// $(this) = the dropdownbox, $(this).val() = selected value
tempList.remove( $(this).val() );

// iterate and hide rows
foreach( element el in tempListView)
// code for hide goes here
});

// Done :-)