如何使用javascript下拉菜单过滤html表格中的数据

<select id="filter">
  <option value="all">全部</option>
  <option value="category1">分类1</option>
  <option value="category2">分类2</option>
  <option value="category3">分类3</option>
</select>

<table id="table">
  <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>

// 获取下拉菜单和表格元素
var filter = document.getElementById('filter');
var table = document.getElementById('table');

// 监听下拉菜单变化事件
filter.addEventListener('change', function() {
  var selectedValue = filter.value; // 获取选择的值

  // 遍历表格行，根据选择的值显示或隐藏行
  for (var i = 1; i < table.rows.length; i++) {
    var row = table.rows[i];
    var category = row.cells[1].textContent; // 获取表格中第二列的值

    if (selectedValue === 'all' || selectedValue === category) {
      row.style.display = ''; // 显示行
    } else {
      row.style.display = 'none'; // 隐藏行
    }
  }
});

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}