如何实现带双选项的下拉列表，切换选项时动态调整表格展示行

实现思路 #

核心逻辑是按车型对原始数据分组，永远保持3个车型各输出1条记录，切换下拉选项时仅修改每个车型的记录筛选规则即可，天然满足固定3行的要求。

完整实现代码 #

1. HTML结构

<!-- 下拉菜单 -->
<select id="filterSelect">
  <option value="abc">仅展示ABC测量数据</option>
  <option value="jjjFirst">优先展示JJJ测量数据</option>
</select>

<!-- 表格 -->
<table>
  <thead>
    <tr>
      <th>Car</th>
      <th>Measurement method</th>
      <th>Size</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

2. JS逻辑

// 原始表格数据，也可以通过DOM读取现有表格生成
const rawData = [
  { car: 'Porsche GTR', method: 'ABC', size: 123, weight: 1231 },
  { car: 'Lamborghini', method: 'ABC', size: 123, weight: 1231 },
  { car: 'Honda', method: 'ABC', size: 213, weight: 41212 },
  { car: 'Lamborghini', method: 'JJJ', size: 231, weight: 12124131 },
  { car: 'Honda', method: 'JJJ', size: 2412413, weight: 41224112 }
]

// 按车型分组，提前整理好每个车型的所有数据
const carGroups = rawData.reduce((groups, item) => {
  if (!groups[item.car]) groups[item.car] = []
  groups[item.car].push(item)
  return groups
}, {})
const carList = Object.keys(carGroups) // 固定为3个车型

// 渲染表格函数
function renderTable(filterType) {
  const tbody = document.getElementById('tableBody')
  let html = ''
  carList.forEach(car => {
    let targetItem
    if (filterType === 'abc') {
      // 规则1：只取ABC的记录
      targetItem = carGroups[car].find(item => item.method === 'ABC')
    } else {
      // 规则2：优先取JJJ，没有就取ABC
      targetItem = carGroups[car].find(item => item.method === 'JJJ') || carGroups[car].find(item => item.method === 'ABC')
    }
    // 拼接行HTML
    html += `<tr>
      <td>${targetItem.car}</td>
      <td>${targetItem.method}</td>
      <td>${targetItem.size}</td>
      <td>${targetItem.weight}</td>
    </tr>`
  })
  tbody.innerHTML = html
}

// 初始化默认渲染第一个选项的内容
renderTable('abc')

// 监听下拉菜单变化
document.getElementById('filterSelect').addEventListener('change', e => {
  renderTable(e.target.value)
})

适配现有DOM的调整方案 #

如果不想提前整理原始数据，想直接基于页面上已有的5行表格做修改，只需要加一步：页面加载时先读取所有表格行的内容生成上述rawData数组，再执行后续逻辑即可，切换选项时直接替换tbody内容，原有5行数据不会丢失。

内容的提问来源于stack exchange，提问作者Sample Name