使用JavaScript在HTML表中按下拉菜单值过滤

<select id="filter">
  <option value="all">全部</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>值1</td>
      <td>选项1</td>
      <td>其他数据</td>
    </tr>
    <tr>
      <td>值2</td>
      <td>选项2</td>
      <td>其他数据</td>
    </tr>
    <tr>
      <td>值3</td>
      <td>选项1</td>
      <td>其他数据</td>
    </tr>
  </tbody>
</table>

function filterTable() {
  var filter = document.getElementById("filter").value;
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");

  for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var showRow = false;

    if (filter === "all") {
      showRow = true;
    } else {
      if (cells[1].innerHTML === filter) {
        showRow = true;
      }
    }

    if (showRow) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

<script>
  document.getElementById("filter").addEventListener("change", filterTable);
</script>