How to make dropdown list filter using jQuery

Question

I want to make drop-down table filter depend on item.id . I tried several ways but they didn't work. What I want is to filter the table depending on item.id .

It worked using this code but when I try to change the selected value or item it does not work. Please help.

$("#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

You can do something like:

If value is not all, select all tr s and show all. Then, select all other tr s except the value usine .not() and hide.

 $(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>