JavaScript动态表格中获取Select下拉框选中值及管理教程

<button type="button" id="add">添加行</button>
<button type="button" id="get">获取所有选中值</button>

<table>
  <tbody id="employee-table">
    <tr>
      <td>
        <select class="form-select" aria-label="Default select example">
          <option value="" selected>请选择</option>
          <option value="\x80\x80\x80\x80\x80\x80">选项A</option>
          <option value="\x80\x90\x80\x80\x80\x80">选项B</option>
          <option value="\x90\x80\x80\x80\x80\x80">选项C</option>
        </select>
      </td>
      <td><input type="number" class="form-control" /></td>
      <td>
        <button type="button" class="btn btn-outline-danger delete" hidden>
          <i class="bi bi-x-circle">删除</i>
        </button>
      </td>
      <td class="handle">
        <span class="input-group-text">
          <i class="bi bi-grip-horizontal"></i>
        </span>
      </td>
    </tr>
  </tbody>
</table>

const table = document.getElementById("employee-table");
document.getElementById("add").addEventListener("click", () => {
  // 克隆第一行作为模板，true表示深克隆（包括子节点）
  const newRow = table.firstElementChild.cloneNode(true);

  // 重置克隆行中的select和input值
  const selectElement = newRow.querySelector("select");
  if (selectElement) {
    selectElement.value = ""; // 清空选中值，使其显示默认选项
  }
  const inputElement = newRow.querySelector("input");
  if (inputElement) {
    inputElement.value = ""; // 清空input值
  }

  // 显示删除按钮（如果模板行中是隐藏的）
  const deleteButton = newRow.querySelector(".delete");
  if (deleteButton) {
    deleteButton.hidden = false;
  }

  // 将新行添加到表格末尾
  table.appendChild(newRow);
});

table.addEventListener("click", (e) => {
  // 查找事件目标元素或其最近的祖先元素是否为带有'delete'类的button
  const deleteButton = e.target.closest("button.delete");

  // 如果不是删除按钮，则直接返回
  if (!deleteButton) return; 

  // 确保表格中至少有一行（避免删除所有行）
  if (table.children.length > 1) {
    // 找到删除按钮的最近的父级<tr>元素并移除
    deleteButton.closest("tr").remove();
  }
});

table.addEventListener("change", (e) => {
  // 查找事件目标元素或其最近的祖先元素是否为带有'form-select'类的select
  const selectElement = e.target.closest(".form-select");

  // 如果不是select元素，则直接返回
  if (!selectElement) return; 

  // 打印当前select的选中值
  console.log("当前选中值:", selectElement.value);
});

document.getElementById("get").addEventListener("click", () => {
  // 使用querySelectorAll获取所有带有'form-select'类的select元素
  // [...array] 将NodeList转换为真正的数组，以便使用map方法
  const allSelectedValues = [...table.querySelectorAll(".form-select")]
    .map(selectElement => selectElement.value); // 遍历每个select并获取其值

  console.log("所有选中值:", allSelectedValues);
});