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

Jquery filters table data using the select list selection box

Table Data
Copy codeThe Code is as follows:
<Table id = "example">
<Thead>
<Tr>
<Th> Name </th>
<Th> Surname </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> Michael </td>
<Td> Jordan </td>
</Tr>
<Tr>
<Td> Michael </td>
<Td> Jackson </td>
</Tr>
<Tr>
<Td> Bruno </td>
<Td> Mars </td>
</Tr>
</Tbody>
</Table>

JS filter code, where select is dynamically generated
 Copy codeThe Code is as follows:
$ ("# Example> thead th"). each (function (I ){
$ ("<Select/>"). attr ("data-index", i2.16.html ($ ("<option/>"). 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 ($ ("<option/>"). text ($ (this). text ()));
}
});
});