如何让HTML表格行中Select控件值独立且动态添加选项（无法修改addRow）

问题出在哪？ #

1. 重复ID冲突：原代码里用了sealing、stamping这类固定ID，新增行后这些ID会重复。jQuery通过ID查找元素时会匹配所有同名ID的元素，改一行等于改全表。
2. DOM查找逻辑错误：原来的random_function用多层parent()往上遍历后，直接搜tr#sealing，这会匹配页面中所有叫sealing的行，而非当前触发事件的那一行对应的控件组。

怎么改？ #

情况1：能修改初始HTML模板 #

先把所有ID替换为class（ID必须唯一，class可重复使用），调整后的模板如下：

<tr class="company-row">
  <th>Company</th>
  <td colspan="7">
    <select data-type="mField" name="company" class="company-select" data-element-type="sel_d_v" onchange="random_function(this)">
      <option value="">-- Select --</option>
      <option value="DO">DO</option>
      <option value="DL">DL</option>
      <option value="DM">DM</option>
    </select>
  </td>
</tr>

<tr class="sealing-row">
  <th>SEAL</th>
  <td class="output" colspan="3">
    <select class="outputa seal-select" name="seal" data-type="mField" data-element-type="sel_d_v" style="width:90%;" onchange="sealHidden_function(this)">
      <option>-- Select --</option>
    </select>
    <input type="text" class="sealHidden" data-type="mField" style="width: 70px;" value="{{ doc.BODY_CONTEXT.sealHidden }}" hidden="hidden" />
  </td>
  <th>Num</th>
  <td colspan="3">
    <input type="text" class="seal1" data-type="mField" style="width: 70px;" value="{{ doc.BODY_CONTEXT.seal1 }}" />
  </td>
</tr>

<tr class="stamping-row">
  <th>STAMP</th>
  <td class="outputing" colspan="3">
    <select class="stamped stamp-select" data-type="mField" data-element-type="sel_d_v" name="stamp" style="width:90%;" onchange="stampHidden_function(this)">
      <option>-- Select --</option>
    </select>
    <input type="text" class="stampHidden" data-type="mField" style="width: 70px;" value="{{ doc.BODY_CONTEXT.stampHidden }}" hidden="hidden" />
  </td>
  <th>Num</th>
  <td colspan="3">
    <input type="text" class="seal2" data-type="mField" style="width: 70px;" value="{{ doc.BODY_CONTEXT.seal2 }}" />
  </td>
</tr>

然后重写random_function，只操作当前行组内的控件：

function random_function(e) {
  let arr, list;
  if (e.value === "DO") {
    arr = ["-- Select --", "NO", "Seal(1)", "Seal(2)"];
    list = ["-- Select --", "NO", "Stamp(1)", "Stamp(2)", "Etc(1)", "Etc(2)"];
  } else if (e.value === "DL" || e.value === "DM") {
    arr = ["-- Select --", "NO", "Seal"];
    list = ["-- Select --", "NO", "Stamp", "Hello(1)", "Hello(2)"];
  }

  // 定位当前select所在的行，找到同组的sealing和stamping行
  const $currentRow = $(e).closest('tr');
  const $sealingRow = $currentRow.next('.sealing-row');
  const $stampingRow = $sealingRow.next('.stamping-row');

  // 更新当前组的SEAL下拉框
  const $sealSelect = $sealingRow.find("td.output select.outputa");
  $sealSelect.empty();
  arr.forEach(item => {
    $sealSelect.append(`<option value="${item}">${item}</option>`);
  });

  // 更新当前组的STAMP下拉框
  const $stampSelect = $stampingRow.find("td.outputing select.stamped");
  $stampSelect.empty();
  list.forEach(item => {
    $stampSelect.append(`<option value="${item}">${item}</option>`);
  });
}

情况2：完全无法修改初始HTML（适配重复ID） #

如果连模板都碰不了，就靠相对DOM位置定位控件，放弃ID选择器：

function random_function(e) {
  let arr, list;
  if (e.value === "DO") {
    arr = ["-- Select --", "NO", "Seal(1)", "Seal(2)"];
    list = ["-- Select --", "NO", "Stamp(1)", "Stamp(2)", "Etc(1)", "Etc(2)"];
  } else if (e.value === "DL" || e.value === "DM") {
    arr = ["-- Select --", "NO", "Seal"];
    list = ["-- Select --", "NO", "Stamp", "Hello(1)", "Hello(2)"];
  }

  // 找到当前select所在行，取它后面紧邻的两行（当前组的sealing和stamping行）
  const $currentRow = $(e).closest('tr');
  const $sealingRow = $currentRow.next();
  const $stampingRow = $sealingRow.next();

  // 更新当前组的SEAL下拉框
  const $sealSelect = $sealingRow.find("td.output select.outputa");
  $sealSelect.find('option').remove();
  for (let i = 0; i < arr.length; i++) {
    $sealSelect.append(`<option value="${arr[i]}">${arr[i]}</option>`);
  }

  // 更新当前组的STAMP下拉框
  const $stampSelect = $stampingRow.find("td.outputing select.stamped");
  $stampSelect.find('option').remove();
  for (let i = 0; i < list.length; i++) {
    $stampSelect.append(`<option value="${list[i]}">${list[i]}</option>`);
  }
}

核心思路 #

不管哪种情况，核心都是只操作当前行所属的控件组：

• 用closest()定位触发事件的行，再用next()找到同组的关联行，避免全局匹配。
• 哪怕addRow()生成重复ID，相对位置的查找逻辑也不会认错行，保证每行下拉框独立更新。

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