So my question is this. I have a table and I am hiding/showing rows based on a dropdown menu selection. What would like to have is the 2 menus working together rather than independently. If I select an item in the first dropdown, I would like to be able then to filter that item further with the second dropdown and so on with any additional dropdown. Here's the code I'm using that works independently currently.

    <script>
$(document).ready(function(){
 $('select#age').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.age').parent().show();
  }else{
   $('td.age').parent().hide();
   $('td.age:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
  $('select#sport').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.sport').parent().show();
  }else{
   $('td.sport').parent().hide();
   $('td.sport:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
})
</script>

So my question is this. I have a table and I am hiding/showing rows based on a dropdown menu selection. What would like to have is the 2 menus working together rather than independently. If I select an item in the first dropdown, I would like to be able then to filter that item further with the second dropdown and so on with any additional dropdown. Here's the code I'm using that works independently currently.

    <script>
$(document).ready(function(){
 $('select#age').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.age').parent().show();
  }else{
   $('td.age').parent().hide();
   $('td.age:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
  $('select#sport').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.sport').parent().show();
  }else{
   $('td.sport').parent().hide();
   $('td.sport:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
})
</script>

• javascript
• jquery
• forms
• selection

• can you post the table of data snippet too... – Sandeep Commented Jan 8, 2013 at 7:15
• Are you looking for like an actual snippet of data from the table or the code generating the table itself. Sorry, I'm like falling asleep at the keyboard here. – Muttface Commented Jan 8, 2013 at 7:48

1 Answer 1

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

$(document).ready(function() {
    var ddlFilterTableRow = $('select.ddlFilterTableRow'),
        headerCount = $('#headerCount');
          headerCount.html($('#tableRegisterKids').find('.Row').length + ' Registered Kids');

    ddlFilterTableRow.on('change', function() {
        ddlFilterTableRow.attr('disabled', 'disabled');

        var records = $('#tableRegisterKids').find('.Row');
        records.hide();

        var critriaAttributes = [];
        ddlFilterTableRow.each(function() {
            var $this = $(this),
                $selectedLength = $this.find(':selected').length,
                $critriaAttribute = '';

            if ($selectedLength > 0 && $this.val() != '0') {
                if ($selectedLength == 1) {
                    $critriaAttribute += '[data-' + $this.data('attribute') + '*="' + $this.val() + '"]';
                } else {
                    var $startDataAttribute = '[data-' + $this.data('attribute') + '*="',
                        $endDataAttribute = '"]',
                        $selectedValues = $this.val().toString();

                    $critriaAttribute += $startDataAttribute + $selectedValues.replaceAll(',', ($endDataAttribute + ',' + $startDataAttribute)) + $endDataAttribute;
                }
                critriaAttributes.push($critriaAttribute);
            }
        });

        var $showRecords = records;
        if (critriaAttributes.length > 0) {
            $.each(critriaAttributes, function(i, filterValue) {
                $showRecords = $showRecords.filter(filterValue);
            });
        }
        $showRecords.show();

        headerCount.html($showRecords.length + ' Registered Kids');

        ddlFilterTableRow.removeAttr('disabled');
    });
});

//================================================================//

<select id="ddlAge" class="ddlFilterTableRow" data-attribute="age">
    <option value="0">Select All</option>
    <option value="10">10</option>
    <option value="8">8</option>
    <option value="6">6</option>
</select>
<select id="ddlSport" class="ddlFilterTableRow" data-attribute="sports">
    <option value="0">Select All</option>
    <option value="Foot Ball">Foot Ball</option>
    <option value="Chess">Chess</option>
    <option value="Cricket">Cricket</option>
</select>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
    <tr>
        <th>Fullname</th>
        <th>Age</th>
        <th>Sport</th>
    </tr>
    <tr class="Row" data-age="10" data-sports="Foot Ball">
        <td>Thulasiram.S</td>
        <td>10</td>
        <td>Foot Ball</td>
    </tr>
    <tr class="Row" data-age="8" data-sports="Cricket">
        <td>ST Ram</td>
        <td>8</td>
        <td>Cricket</td>
    </tr>
    <tr class="Row" data-age="6" data-sports="Chess">
        <td>Ram Kumar.S</td>
        <td>6</td>
        <td>Chess</td>
    </tr>
    <tr class="Row" data-age="8" data-sports="Chess">
        <td>Dinesh Kumar.S</td>
        <td>8</td>
        <td>Chess</td>
    </tr>
    <tr class="Row" data-age="6" data-sports="Foot Ball">
        <td>Raja Ram.S</td>
        <td>6</td>
        <td>Foot Ball</td>
    </tr>
    <tr class="Row" data-age="10" data-sports="Chess">
        <td>Priya</td>
        <td>10</td>
        <td>Chess</td>
    </tr>
</table>

Please find for DEMO