CODEWITHSUNDEEP
javascriptjqueryfilter
mohamedelhawary
mohamedelhawary

Reputation: 113

How to make dropdown list filter using jQuery

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>

Upvotes: 2

Views: 3769

Answers (1)

Eddie
Eddie

Reputation: 26844

You can do something like:

If value is not all, select all trs and show all. Then, select all other trs 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>

Upvotes: 2

Related Questions