jquery - 通过 2 个选择列表过滤 html 表格

Question

我想通过 2 个选择列表过滤(隐藏除选择之外的所有条目)表行中的多个条目。 第一个包含国家，第二个包含年份。

我可以编写一个按单个参数进行过滤的脚本，但是当用户选择德国和 2017 年时如何扩展功能(显示 2017 年德国的所有项目)？

<select class="form-control" id="filter-by-country">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<select class="form-control" id="filter-by-year">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 1

应该可以做到(一条建议:CSS类名不能以数字开头，这是非法的，按选择项值过滤，而不是文本)

var filter_c=$('#filter-by-country');
var filter_y=$('#filter-by-year');
$('.filter_control').on('change', function(e){

var class_c=filter_c.val().toLowerCase();
var class_y='y'+filter_y.val().toLowerCase();
$('.all-projects tr.text-center').hide();
if(class_c=='country' || class_c=='all' ){
class_c='text-center'
}
if(class_y=='yyear' || class_y=='yall' ){
class_y='text-center'
}
console.log('.'+class_c+' .'+class_y)
$('.'+class_c+'.'+class_y).show();
});

代码笔:https://codepen.io/peker-ercan/pen/jeqpQx