javascript - 如何使用 jQuery 制作下拉列表过滤器

Question

我想让下拉表过滤器依赖于item.id。我尝试了几种方法，但没有成功。我想要的是根据 item.id 过滤表格。

使用此代码可以正常工作，但是当我尝试更改所选值或项目时，它不起作用。请帮忙。

$("#filterText").change(function() {
  var rex = $('#filterText').val();

  if (rex == "/all/") {
    clearFilter()
  } else {
    var id = $('#' + rex);
    id.hide();
    // $('.toggle').filter(function () {
    //    return rex.test($(this).text());
    // }).show();
  }
});

function clearFilter() {
  $('#filterText').val('');
  $('.toggle').show();
}

<select id='filterText'>
  @foreach (var item in Model)
  {
    <option value="@item.ID">@item.Title.ToString()</option>
  }
</select>

<div class="panel-group" id="accordion">
  <div id="faqs" class="faqs">
    <table>
      @foreach (var item in Model) 
      { 
        foreach (var child in item.questions) 
        {
          <tr id="@item.ID" class="toggle faq faq-marketplace faq-authors">
            <td class="togglet">@child.Title</td>
            <td class="togglec">@child.Answer</td>
          </tr>
        } 
      }
    </table>
  </div>
</div>

Answer 1

你可以这样做:

如果值不是全部，则选择所有tr并显示全部。然后，使用 .not() 选择除值之外的所有其他 tr 并隐藏。

$(function() {
  $("#filterText").change(function() {
    var rex = $('#filterText').val();
    if (rex != "all") $("table tr").show().not('#' + rex).hide();
    else $("table tr").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText'>
   <option value="all"> All </option>
   <option value="1">Value 1</option>
   <option value="2">Value 2</option>
   <option value="3">Value 3</option>
</select>

<table>
  <tr id="1" class="toggle faq faq-marketplace faq-authors">
    <td class="togglet">Title 1</td>
    <td class="togglec">Whatever 1</td>
  </tr>
  <tr id="2" class="toggle faq faq-marketplace faq-authors">
    <td class="togglet">Title 2</td>
    <td class="togglec">Whatever 2</td>
  </tr>
  <tr id="3" class="toggle faq faq-marketplace faq-authors">
    <td class="togglet">Title 3</td>
    <td class="togglec">Whatever 3</td>
  </tr>
</table>