Filtering on right column-CodePudding

I am trying to make interactive tables which changes based on dropdown values. bind change event is being triggered but not filtering value based on right column and dropdown value. I am new to JS so having difficulty to make it working with the right column of table based on selection of dropdown.

HTML

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<form name="Undergraduate Major Listing Options">
  <fieldset>
    <legend>Your Degree Options</legend>
    <div class="one-column">
      <span>
        <label class="searchforlabel" for="ddlDegree">Sport</label> 
        <span>
          <select class="ddlFilterTableRow" data-attribute="degree" id="ddlDegree" name="degree">
            <option value="Cricket">Cricket</option>
            <option value="Chess">Chess</option>
          </select>
        </span>
      </span> 
      <span>
        <label class="searchforlabel" for="ddlCollege">Animal</label> 
        <span>
          <select class="ddlFilterTableRow" data-attribute="college" id="ddlCollege" name="college">
            <option value="0">Cat</option>
            <option value="Agricultural Sciences">Dog</option>
          </select>
        </span>
      </span>
      <span>
      
      </span>
    </div>
  </fieldset>
</form>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
    <th>Sport</th>
    <th>Favorite Animal</th>
  </tr>
  <tr class="Row" data-age="10" data-sports="Foot Ball" data-animal="Cat, Dog">
    <td>Thulasi Ram.S</td>
    <td>10</td>
    <td>Foot Ball</td>
    <td>Cat<br />Dog</td>
  </tr>
  <tr class="Row" data-age="8" data-sports="Cricket" data-animal="Cat">
    <td>Ram</td>
    <td>8</td>
    <td>Cricket</td>
    <td>Cat</td>
  </tr>
  <tr class="Row" data-age="6" data-sports="Chess"  data-animal="Dog">
    <td>Ram Kumar.S</td>
    <td>6</td>
    <td>Chess</td>
    <td>Dog</td>
  </tr>
  <tr class="Row" data-age="8" data-sports="Chess" data-animal="Cat">
    <td>Dinesh Kumar.S</td>
    <td>8</td>
    <td>Chess</td>
    <td>Cat</td>
  </tr>
  <tr class="Row" data-age="6" data-sports="Foot Ball" data-animal="Dog">
    <td>Raja Ram.S</td>
    <td>6</td>
    <td>Foot Ball</td>
    <td>Dog</td>
  </tr>
  <tr class="Row" data-age="10" data-sports="Chess" data-animal="Dog">
    <td>Priya</td>
    <td>10</td>
    <td>Chess</td>
    <td>Dog</td>
  </tr>
</table>

$(document).ready(function () {
  $('select.ddlFilterTableRow').bind('change', function () {
  
    $('select.ddlFilterTableRow').attr('disabled', 'disabled');
    $('#tableRegisterKids').find('.Row').hide();
    
    var critriaAttribute = '';
    $('select.ddlFilterTableRow').each(function () {
      if ($(this).val() != '0') {critriaAttribute  = '[data-'   $(this).data('attribute')   '*="'   $(this).val()   '"]';
      }});
      
    $('#tableRegisterKids').find('.Row'   critriaAttribute).show();
    $('#headerCount').html($('table#tableRegisterKids tr.Row:visible').length   ' Registered Kids');
    $('select.ddlFilterTableRow').removeAttr('disabled');
  });
  
});

CSS

td {
  padding:20px;
}

CodePudding user response：

This should work with what you currently have.

$(document).ready(function () {
  $('select.ddlFilterTableRow').bind('change', function () {
    let degree = $('#ddlDegree').val();
    let college = $('#ddlCollege').val();
  
    $('#tableRegisterKids tr.Row').show();
    $('#tableRegisterKids tr.Row').each(function(){
      if($(this).data('sports') != degree || $(this).data('animal') != college)
        $(this).hide()
    })
  })
})

I had to change the HTML slightly so that value of the drop-down is the value of the row's data attribute (see link below in jsFiddle)

Note* - your dropdowns should have a default of "All Colleges" and "All Degrees" so the user can see all without re-loading the page

Here is the jsFiddle: Table filter example