Question

我正在设置一个可过滤的表格。在选择中选择一个选项时，它会检查该值是否等于每一行中的数据属性。

当前我有1个选择工作。但是现在我希望它检查多个选择选项，如果一个选项具有一个选中的选项，或者两个都有一个选中的选项来检查数据属性。

var selectedClass;

$(".class").change(function() {
  selectedClass = $(".class option:selected").text();

  $(".row").each(function() {
    $(this).removeClass("show hide");

    if (selectedClass === ($(this).data("class"))) {
      $(this).addClass("show");

      $("tbody > .show").each(function(i) {
        $(this).find(".standing").text(++i);
      });
    } else {
      $(this).addClass("hide");
    }

    if ($(".class option:selected").index() === 0) {
      $(".row").each(function() {
        $(this).removeClass("show hide");
      });
    }
  });
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr class="filter">
    <select class="class">
      <option>CLASS</option>
      <option>CLASS A</option>
      <option>CLASS B</option>
      <option>CLASS C</option>
    </select>
    </th>
    <th>
      <select class="year">
        <option>2019</option>
        <option>2018</option>
        <option>2017</option>
      </select>
    </th>
  </tr>
  <tr>
    <th></th>
    <th>POS</th>
    <th>TEAM</th>
    <th>DRIVER</th>
    <th>TOT</th>
  </tr>
  <tbody>
    <tr class="row" data-class="CLASS B" data-year="2019">
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>85</td>
    </tr>
    <tr class="row" data-class="CLASS A" data-year="2017">
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>100</td>
    </tr>
    <tr class="row" data-class="CLASS B" data-year="2018">
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>34</td>
    </tr>
    <tr class="row" data-class="CLASS C" data-year="2017">
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

Answer 1

使用==或转换为相同格式（数字与字符串）try
console.log($(this).data("year"), typeof $(this).data("year"), selectedYear, typeof selectedYear)

明白我的意思
请注意保留字类
确保您的HTML有效，我添加了thead和一个丢失的TH

$(".filter select").change(function() {
  var selectedClass = $(".class option:selected").text(),
      selectedYear = $(".year option:selected").text(); // jQuery converts to number

  $("tbody tr").each(function() {
    var year = $(this).data("year") == selectedYear, // do not use === unless you want to convert first
      carClass = $(this).data("class") == selectedClass; // class is a reserved word
    $(this).toggle(year && carClass);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr class="filter">
      <th>
        <select class="class">
          <option>CLASS</option>
          <option>CLASS A</option>
          <option>CLASS B</option>
          <option>CLASS C</option>
        </select>
      </th>
      <th>
        <select class="year">
          <option>2019</option>
          <option>2018</option>
          <option>2017</option>
        </select>
      </th>
    </tr>
    <thead>
      <tr>
        <th></th>
        <th>POS</th>
        <th>TEAM</th>
        <th>DRIVER</th>
        <th>TOT</th>
      </tr>
      <tbody>
        <tr data-class="CLASS B" data-year="2019">
          <td></td>
          <td>1ST</td>
          <td>PROSPORT PERFORMANCE (85)</td>
          <td>ROBERT RENAUER</td>
          <td>85</td>
        </tr>
        <tr data-class="CLASS A" data-year="2017">
          <td></td>
          <td>1ST</td>
          <td>PROSPORT PERFORMANCE (85)</td>
          <td>ROBERT RENAUER</td>
          <td>100</td>
        </tr>
        <tr data-class="CLASS B" data-year="2018">
          <td></td>
          <td>1ST</td>
          <td>PROSPORT PERFORMANCE (85)</td>
          <td>ROBERT RENAUER</td>
          <td>34</td>
        </tr>
        <tr data-class="CLASS C" data-year="2017">
          <td></td>
          <td>1ST</td>
          <td>PROSPORT PERFORMANCE (85)</td>
          <td>ROBERT RENAUER</td>
          <td>34</td>
        </tr>
      </tbody>
</table>

如何检查是否选择了一个选择选项或两者都选择了

1 个答案: