Filter data in HTML Table with multiple DropDownList in jQuery

Last Reply 4 months ago By dharmendr

Posted 4 months ago

how can we filter data in html table based on multiple dropdown list values(ie BASED ON COUNTRY And age in below table ) using jquery

i want to filter data in the html table based on 2 dropdown list values.(one is country and second is age).

<table style="width:100%" id=table11>
  <tr>
    <th>name</th>
    <th>country</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>USA</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>UK</td>
    <td>50</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>80</td>
  </tr>
    
  <tr>
    <td>sam</td>
    <td>AUSTRALIA</td>
    <td>80</td>
  </tr>
  <tr>
    <td>joe</td>
    <td>INDIA</td>
    <td>60</td>
  </tr>
  <tr>
    <td>alan</td>
    <td>USA</td>
    <td>60</td>
  </tr>
</table> 
<select class="cl_country" data-attribute="class">
            <option value="all">Select Class </option>
            <option value="India">india</option>
            <option value="usa">usa</option>
            <option value="uk">uk</option>
</select>
<select class="cl_age" data-attribute="class">
            <option value="all">Select Class </option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="80">80</option>
</select>

 

         $(document).ready(function () { 
             $(".cl_country").on("change", function () {
                 searchterm = $(this).val();                  
                 $('#table11 tbody tr').each(function () {                     
                     var sel = $(this);
                     var txt = sel.find('td:eq(1)').text();
                     if (searchterm != 'all') { 
                         if (txt.indexOf(searchterm) === -1) {
                             $(this).hide();
                         }
                         else {
                             $(this).show();
                         }
                     }
                     else
                     {                        
                         $('#table11 tbody tr').show();
                     }
                 });
             });
             $(".cl_age").on("change", function () {
                 searchterm = $(this).val();
                  
                 $('#table11 tbody tr').each(function () {
                     
                     var sel = $(this);
                     var txt = sel.find('td:eq(2)').text();
                     if (searchterm != 'all') {
 
 
                         if (txt.indexOf(searchterm) === -1) {
                             $(this).hide();
                         }
                         else {
                             $(this).show();
                         }
                     }
                     else
                     {                        
                         $('#table11 tbody tr').show();
                     }
                 });
             });
         });

here i have 2 dropdownlist. its working/filtering data in table when used alone but i want to filter data in table based on the value in both dropdownlists(country and age) ie when the value in one dropdown list(either country or age) is selected the table gets filtered and filter the remaining data(ie filtered result by the first dropdownlist) in the table with the second dropdownlist selection

You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months ago Modified on 4 months ago

Hi jovceka,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlCountry,#ddlAge").on("change", function () {
            var country = $('#ddlCountry').find("option:selected").val();
            var age = $('#ddlAge').find("option:selected").val();
            SearchData(country, age)
        });
    });
    function SearchData(country, age) {
        if (country.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL') {
            $('#table11 tbody tr').show();
        } else {
            $('#table11 tbody tr:has(td)').each(function () {
                var rowCountry = $.trim($(this).find('td:eq(1)').text());
                var rowAge = $.trim($(this).find('td:eq(2)').text());
                if (country.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
                    if (rowCountry.toUpperCase() == country.toUpperCase() && rowAge == age) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {
                    if (country != 'all') {
                        if (rowCountry.toUpperCase() == country.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (age != 'all') {
                        if (rowAge == age) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                }

            });
        }
    }
</script>
<select class="cl_country" id="ddlCountry">
    <option value="all">Select Class </option>
    <option value="India">india</option>
    <option value="usa">usa</option>
    <option value="uk">uk</option>
</select>
<select class="cl_age" id="ddlAge">
    <option value="all">Select Class </option>
    <option value="50">50</option>
    <option value="60">60</option>
    <option value="80">80</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>name</th>
        <th>country</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>USA</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>UK</td>
        <td>50</td>
    </tr>
    <tr>
        <td>John</td>
        <td>INDIA</td>
        <td>80</td>
    </tr>
    <tr>
        <td>sam</td>
        <td>AUSTRALIA</td>
        <td>80</td>
    </tr>
    <tr>
        <td>joe</td>
        <td>INDIA</td>
        <td>60</td>
    </tr>
    <tr>
        <td>alan</td>
        <td>USA</td>
        <td>60</td>
    </tr>
</table>

Demo