根据 select 中的选项更改元素

Question

我有一张非常简单的桌子。我正在尝试根据 HIST 列的值隐藏行。

基本上：

• 如果选择选择否，则仅显示 HIST = false 的行
• 如果选择说是，则显示所有行（无论是假还是真）

我被困在这里，但我不是很远。有什么帮助吗？

$('#historySelect').change(function() {
  var option = $(this).val();
  if (option === "No") {

  } else {

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Show History
    <select id="historySelect">
        <option value="Yes">No</option>
        <option value="No">Yes</option>
    </select>
</label>

<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
      <th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center hover-table odd" role="row">

      <td>Name</td>
      <td class="hist hidden">true</td>
    </tr>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">false</td>
    </tr>
  </tbody>
</table>

Answer 1

首先请注意，您已交换了 option 元素的值和文本。

要实现您的要求，您可以将has() 与:contains 选择器结合使用，以获取具有包含false 的.hist 元素的tr 元素。然后你可以根据需要show()或hide()，像这样：

$('#historySelect').change(function() {
  var $rows = $('#dataTable tbody tr');
  if ($(this).val() === "No") {
    $rows.hide().has('.hist:contains(false)').show();
  } else {
    $rows.show();
  }
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Show History
  <select id="historySelect">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
  </select>
</label>

<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
      <th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">true</td>
    </tr>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">false</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用:contains() 选择器（区分大小写。）。

$('#historySelect').change(function() {
  var option = $(this).val();
  if (option === "No") {
    $(".hist:contains('false')").parent().hide();
    $(".hist:contains('true')").parent().show();
    
  } else {
    $(".hist:contains('true')").parent().hide();
    $(".hist:contains('false')").parent().show();
    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Show History
    <select id="historySelect">
        <option value="Yes">No</option>
        <option value="No">Yes</option>
    </select>
</label>

<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
      <th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">true</td>
    </tr>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">false</td>
    </tr>
  </tbody>
</table>