Jquery uses the select list selection box to filter table data. Example _ jquery

This article describes how to use the select list selection box to filter table data. For more information, see the select list selection box to filter table data.

Table Data

The Code is as follows:

Name	Surname
Michael	Jordan
Michael	Jackson
Bruno	Mars

JS filter code, where select is dynamically generated

The Code is as follows:

$ ("# Example> thead th"). each (function (I ){
$ (""). Attr (" data-index ", i2.16.html ($ (""). Change (function (){
$ ("# Example> tbody> tr"). show (). filter (function (){
Var comb = [], children = $ (this). children ();
Children. each (function (I ){
Var value = $ ("select [data-index = '" + I + "']"). val ();
If (value = $ (this). text () | value = "") comb. push (1 );
});
Return comb. length! = Children. length;
}). Hide ();
}). AppendTo ("body ");
});
$ ("# Example> tbody tr"). each (function (){
$ (This). children (). each (function (I ){
Var that = $ (this );
Var select = $ ("select [data-index = '" + I + "']");
If (! Select. children (). filter (function (){
Return $ (this). text () = that. text ();
}). Length ){
Select. append ($ (""). Text ($ (this). text ()));
}
});
});