如何在JavaScript中获取动态表格内select字段的选中选项？

核心原理 #

Bootstrap的form-select仅为原生<select>添加样式，不会改变其原生行为。切换选项时，浏览器不会修改HTML中的selected属性，而是通过DOM对象的value、selectedIndex等属性维护实时选中状态，直接读取这些属性即可拿到真实选中值。

具体实现方法 #

1. 获取指定行的select选中项

如果已知目标行的ID（比如line-0），可以通过行ID定位select元素并读取选中状态：

function getRowSelectedOption(rowId) {
  const row = document.getElementById(rowId);
  if (!row) return null;
  
  // 定位该行第一列的select元素
  const select = row.querySelector('td:first-child .form-select');
  if (!select) return null;
  
  // 获取选中值和文本
  return {
    value: select.value,
    text: select.options[select.selectedIndex].text
  };
}

// 调用示例：获取line-1行的选中项
const selected = getRowSelectedOption('line-1');
console.log('选中值:', selected.value, '选中文本:', selected.text);

2. 获取所有行的select选中项

如果需要一次性获取表格中所有动态生成行的select选中状态：

function getAllSelectedOptions() {
  const table = document.getElementById('employee-table');
  // 匹配所有带line-前缀ID的行
  const rows = table.querySelectorAll('tr[id^="line-"]');
  
  const result = [];
  rows.forEach(row => {
    const select = row.querySelector('td:first-child .form-select');
    if (select) {
      result.push({
        rowId: row.id,
        selectedValue: select.value,
        selectedText: select.options[select.selectedIndex].text
      });
    }
  });
  
  return result;
}

// 调用示例：点击按钮时获取所有选中项
document.getElementById('get-all-btn').addEventListener('click', () => {
  const allSelected = getAllSelectedOptions();
  console.log('所有行选中项:', allSelected);
});

3. 针对每行操作按钮的场景

如果是每行的删除按钮（或自定义按钮）需要获取当前行的select选中项，可以修改按钮的onclick参数，传入当前行的ID：

// 修改addNewRow中按钮的innerHTML，把this换成row.id
cell.innerHTML = 
  '<button value="delete" onclick="deleteRow(\'' + row.id + '\')" type="button" class="btn btn-outline-danger">' +
  '<i class="bi bi-x-circle"></i>' +
  '</button> ';

// 对应的deleteRow函数可以同时获取选中项
function deleteRow(rowId) {
  const selected = getRowSelectedOption(rowId);
  console.log('要删除的行选中项:', selected);
  
  // 执行删除逻辑
  const row = document.getElementById(rowId);
  row.remove();
}

关键说明 #

• 无需依赖HTML中的selected属性，浏览器会实时更新DOM元素的value和selectedIndex属性，这是原生select的标准行为。
• 使用querySelector定位元素时，通过.form-select类可以更精准地匹配目标select，避免误选中其他元素。

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