请求实现JavaScript基于select box值+后续任意文本的表格行过滤功能

嘿，作为JS新手能想到扩展功能真的超棒！我来帮你把原来的精确匹配改成支持「选中值+任意后续文本」的模糊过滤，一步步来：

先明确需求 #

原来的逻辑是严格匹配select的value和表格单元格内容，现在要改成：只要单元格内容包含选中的value（或者以选中value开头，后面可以跟任意文本），就显示该行。

第一步：补全基础结构（示例参考） #

先给你一个完整的示例结构，方便你对应自己的代码：

<!-- 你的选择框 -->
<select name="filterdivision" id="filterdivision">
  <option selected="selected" value="">Select Division</option>
  <option value="Metals and Minerals">Metals and Minerals</option>
  <option value="Chemicals">Chemicals</option>
</select>

<!-- 示例表格 -->
<table id="dataTable" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Division</th>
      <th>Product</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Metals and Minerals</td>
      <td>Iron Ore</td>
    </tr>
    <tr>
      <td>Metals and Minerals - Ferrous</td>
      <td>Steel</td>
    </tr>
    <tr>
      <td>Chemicals</td>
      <td>Industrial Acid</td>
    </tr>
    <tr>
      <td>Metals and Minerals (Non-Ferrous)</td>
      <td>Copper</td>
    </tr>
    <tr>
      <td>Specialty Chemicals</td>
      <td>Lubricants</td>
    </tr>
  </tbody>
</table>

第二步：修改JavaScript逻辑（核心部分） #

版本1：支持「包含选中值」的模糊匹配（最常用）

这个版本会匹配所有包含选中值的行，不管value在单元格文本的开头、中间还是结尾：

// 给选择框绑定change事件
document.getElementById('filterdivision').addEventListener('change', function() {
  // 获取选中值，转小写实现不区分大小写匹配（可选，去掉就区分大小写）
  const selectedValue = this.value.trim().toLowerCase();
  // 获取表格所有行
  const tableRows = document.querySelectorAll('#dataTable tbody tr');
  
  // 遍历每一行判断是否显示
  tableRows.forEach(row => {
    // 获取目标单元格的文本（这里取第一列，你可以改成自己的列索引）
    const divisionText = row.cells[0].textContent.trim().toLowerCase();
    
    // 判断规则：选中值为空则显示所有行，否则只要包含选中值就显示
    if (selectedValue === '' || divisionText.includes(selectedValue)) {
      row.style.display = ''; // 显示行
    } else {
      row.style.display = 'none'; // 隐藏行
    }
  });
});

版本2：支持「以选中值开头」的匹配（贴合你说的「选中值+后续任意文本」）

如果你只想匹配以选中值开头的行（比如只认"Metals and Minerals"开头的，不匹配"xxx Metals and Minerals"），把判断条件里的includes换成startsWith就行：

// 把判断行修改为
if (selectedValue === '' || divisionText.startsWith(selectedValue)) {

第三步：优化方案（更优雅的样式控制） #

直接修改style.display虽然简单，但更推荐用CSS类名来控制显示隐藏，方便后续修改样式：

/* 先定义隐藏类 */
.hidden-row {
  display: none;
}

然后JS改成：

document.getElementById('filterdivision').addEventListener('change', function() {
  const selectedValue = this.value.trim().toLowerCase();
  const tableRows = document.querySelectorAll('#dataTable tbody tr');
  
  tableRows.forEach(row => {
    const divisionText = row.cells[0].textContent.trim().toLowerCase();
    const shouldShow = selectedValue === '' || divisionText.includes(selectedValue);
    // 用toggle方法：如果shouldShow为false，就添加hidden-row类，否则移除
    row.classList.toggle('hidden-row', !shouldShow);
  });
});

这样你的代码结构更清晰，也符合前端开发的最佳实践~

内容的提问来源于stack exchange，提问作者Anil kumar