Как я могу отфильтровать таблицу с <select>, используя JQuery?

Question

Мне нужна помощь с функцией фильтра на столе. На данный момент я могу отфильтровать таблицу, используя ввод пользователя следующим образом:

$(document).ready(function(){
  $("#myInput").on( "keyup" ,function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Это также прекрасно работает, но как я могу отфильтровать таблицу с выбором пользователей. Таким образом, пользователь может выбрать опцию:

<select name="Filter" id="myInput">
   <option id="myInput" value="error">John</option>
   <option id="myInput" value="error">Warning</option>
</select>

и после того, как он выбрал что-то, я бы отфильтровал после этого. Таблица может выглядеть так:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<table>
  <thead>
  <tr>
    <th>Log</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

  </tr>
  <tr>
    <td>Waring dfadf adf</td>
  </tr>
  </tbody>
</table>

Спасибо за помощь <3 </p>

Answer 1

Это почти то же самое, за исключением того, что вместо события keyup вы используете change.

Кроме того, вы должны использовать .each() вместо filter(), поскольку вы нигде не возвращаете значение.

И вам необходимо установить значения параметров на то, что вы хотитеих совпадать, а не error.

$("#myInput").on("change", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").each(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
  <option id="myInput" value="john">John</option>
  <option id="myInput" value="warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
    <tr>
      <td>John did it</td>
    </tr>
  </tbody>
</table>

Answer 2

$(document).ready(function(){
  $("#myInput").on("change", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
   <option   value="">All</option>
   <option   value="John">John</option>
   <option  value="Warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
     <tr>
      <td>John did it</td>
    </tr>
 </tbody>
</table>