Hide table row by dropdown

html, javascript

Solution

I create this sollution.

html

<select id="username" class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select id="gender" class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>

<table class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>

js

$("#username").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td:first-child").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

$("#gender").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

fiddle

Problem

I have 2 dropdown menu (Username & Gender) and I have table with 3 columns (username, name, and gender). I want to filter the table based on dropdown value. What must I do ? Here's the code : ``` <select class="form-control selectpicker"> <option value="">Username</option> <option value="">user1</option> <option value="">user2</option> <option value="">user3</option> </select> <select class="form-control selectpicker"> <option value="">Gender</option> <option value="">M</option> <option value="">F</option> </select> </div> <table class="dynamicTable tableTools table table-striped table-primary"> <!-- Table heading --> <thead> <tr> <th>Username</th> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>user1</td> <td>Jane</td> <td>F</td> </tr> <tr> <td>user2</td> <td>John</td> <td>M</td> </tr> <tr> <td>user3</td> <td>Jack</td> <td>M</td> </tr> </tbody> <!-- // Table body END --> </table> <!-- // Table END --> ```

Original source