使用JavaScript添加新行时下拉框optgroup缺失的解决建议

嘿，我明白你的问题了！你的当前代码只遍历了下拉框里的<option>元素，完全没处理<optgroup>分组标签，这就是新行里看不到分组的原因。咱们来修改addNewRow函数，让它能完整复制包括分组在内的整个下拉结构。

修改后的完整代码 #

首先是JavaScript部分：

function addNewRow() {
  // 用时间戳生成唯一ID，避免重复（原代码里RowId每次重置为1000，容易冲突）
  let RowId = Date.now(); 
  const originalSelect = document.getElementsByName("catsndogs")[0];
  const tbody = document.getElementById("animals").querySelector("tbody");
  const row = document.createElement("TR");
  const cell1 = document.createElement("TD");
  const cell2 = document.createElement("TD");
  const cell3 = document.createElement("TD");

  // 构建新的select元素
  const newSelect = document.createElement("SELECT");
  newSelect.name = "catsndogs";
  newSelect.id = RowId;
  newSelect.className = "textbg";

  // 遍历原select的所有子节点，覆盖optgroup和option
  originalSelect.childNodes.forEach(node => {
    // 跳过DOM里的文本节点（比如换行、空格）
    if (node.nodeType !== 1) return;

    if (node.tagName === "OPTGROUP") {
      // 创建新的optgroup并复制label属性
      const newOptGroup = document.createElement("OPTGROUP");
      newOptGroup.label = node.label;
      // 遍历当前optgroup内的option，逐个复制
      node.querySelectorAll("option").forEach(opt => {
        const newOption = document.createElement("OPTION");
        newOption.value = opt.value;
        newOption.textContent = opt.textContent;
        // 可选：保留原option的选中状态
        if (opt.selected) newOption.selected = true;
        newOptGroup.appendChild(newOption);
      });
      newSelect.appendChild(newOptGroup);
    } else if (node.tagName === "OPTION") {
      // 处理单独的option（比如最顶部的"Select"选项）
      const newOption = document.createElement("OPTION");
      newOption.value = node.value;
      newOption.textContent = node.textContent;
      if (node.selected) newOption.selected = true;
      newSelect.appendChild(newOption);
    }
  });

  // 组装单元格和行
  cell1.appendChild(newSelect);
  cell2.innerHTML = ' ';
  cell3.innerHTML = ` [<a href="javascript:deleteRow(${RowId});" >-Remove</a>]`;
  
  row.appendChild(cell1);
  row.appendChild(cell2);
  row.appendChild(cell3);
  tbody.appendChild(row);
}

// 补充deleteRow函数（原代码未定义，避免报错）
function deleteRow(rowId) {
  const select = document.getElementById(rowId);
  if (select) {
    const row = select.closest("tr");
    row.remove();
  }
}

然后是HTML部分：

<table id="animals">
  <tbody>
    <tr>
      <td>
        <select name="catsndogs">
          <option>Select</option>
          <optgroup label="Cats">
            <option>Tiger</option>
            <option>Leopard</option>
            <option>Lynx</option>
          </optgroup>
          <optgroup label="Dogs">
            <option>Grey Wolf</option>
            <option>Red Fox</option>
            <option>Fennec</option>
          </optgroup>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<a href="javascript:addNewRow();">+ Add New Row</a>

关键修改点说明 #

• 不再直接循环options集合：改为遍历原select的childNodes，这样能捕获到<optgroup>标签，而不仅仅是嵌套在里面的option
• 区分节点类型处理：判断每个节点是OPTGROUP还是OPTION，分别创建对应的新元素并复制属性
• 完整保留分组结构：对于每个optgroup，先创建新的分组容器，再把内部的option逐个复制进去
• 优化ID生成：用Date.now()生成唯一ID，避免原代码中ID重复的问题
• 补充缺失的deleteRow函数：原代码只调用了该函数但未定义，补充后避免控制台报错

这样修改后，新添加的行里就能完整保留原下拉框的optgroup分组结构啦！

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