如何使用在选择框中选择的值更改显示在表中的数据？

<select id="selectBox">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<table id="dataTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
    <!-- 其他数据行 -->
  </tbody>
</table>

// 获取选择框和表格的引用
const selectBox = document.getElementById('selectBox');
const dataTable = document.getElementById('dataTable');

// 监听选择框值变化事件
selectBox.addEventListener('change', function() {
  // 获取选择框当前选中的值
  const selectedValue = selectBox.value;

  // 根据选择的值更新表格中的数据
  const dataRows = dataTable.getElementsByTagName('tr');
  for (let i = 1; i < dataRows.length; i++) {
    const rowData = dataRows[i].getElementsByTagName('td');
    const cellValue = rowData[0].textContent; // 假设第一列是用于匹配选择框值的列

    // 根据选择框的值显示/隐藏对应的数据行
    if (cellValue === selectedValue) {
      dataRows[i].style.display = '';
    } else {
      dataRows[i].style.display = 'none';
    }
  }
});