如何使用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並顯示全部。 然后，選擇除值usine .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>