javascript - HideShow rows based on multiple dropdown selections (filtering) - Stack Overflow

admin管理员组

文章数量:1320656

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

Share Improve this question Follow asked Jan 8, 2013 at 6:52 MuttfaceMuttface 34111 gold badge44 silver badges1515 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptHideShow rows based on multiple dropdown selections (filtering)Stack Overflow