在动态生成表格中高效获取下拉菜单选中项的JavaScript教程

<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" placeholder="输入数字" /></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 row = table.firstElementChild.cloneNode(true);

  // 重置克隆行中的表单元素值
  row.querySelector("select").value = ""; // 清空下拉菜单选中值
  row.querySelector("input").value = "";  // 清空输入框值

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

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

table.addEventListener("click", (e) => {
  // 使用closest找到最近的删除按钮（class为.delete的button）
  const tgt = e.target.closest("button.delete");

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

  // 确保至少保留一行，防止表格为空
  if (table.children.length > 1) {
    tgt.closest("tr").remove(); // 移除删除按钮所在的行
  } else {
    alert("至少需要保留一行！");
  }
});

table.addEventListener("change", (e) => {
  // 找到最近的class为.form-select的select元素
  const tgt = e.target.closest(".form-select");

  // 如果改变的不是select元素，则返回
  if (!tgt) return;

  console.log("当前选中的值:", tgt.value);
  // 在此处可以执行其他逻辑，例如更新相关数据或UI
});

document.getElementById("get").addEventListener("click", () => {
  // 选取表格中所有class为.form-select的select元素
  const selectElements = table.querySelectorAll(".form-select");

  // 使用map方法遍历所有select元素，并提取它们的value属性
  const selectedValues = [...selectElements].map(sel => sel.value);

  console.log("所有下拉菜单的选中值:", selectedValues);
  // 在此处可以将这些值用于表单提交或进一步处理
});