最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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>
Share Improve this question asked Jan 8, 2013 at 6:52 MuttfaceMuttface 3411 gold badge4 silver badges15 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

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

发布评论

评论列表(0)

  1. 暂无评论