动态表单克隆行的select联动失效问题求助

问题背景 #

我正在制作带内部函数的动态表单，通过JavaScript的cloneNode实现表单行的克隆与删除。需求是每行的两个select下拉框实现联动：第一个select的选择决定第二个select的选项，但目前联动仅在第一行生效，且不能使用重复ID（示例中ID仅作演示）。

解决方案步骤 #

1. 调整HTML结构（移除重复ID，添加类名） #

删除模板中重复的ID，改用类名标识下拉框，同时移除内联onchange事件：

<div class="polozky row col-12" id="polozky">
  <div class="polozka row col-12 card-footer bg-yellow" id="sablona">
    <!-- 其他元素保持不变 -->
    <div class="col-md-2">
      <div class="form-group">
        <label>Typ: </label>
        <select class="col-md-7 typ-select" name="typ[]" tabindex="3">
          <option selected>Choose...</option>
          <option value="1" <?php /* echo ($result['Typ'] == '1' ? 'selected' : '') */ ?>>Oddělení</option>
          <option value="2" <?php /*echo ($result['Typ'] == '2' ? 'selected' : '')*/ ?>>Skupina</option>
          <option value="3" <?php /*echo ($result['Typ'] == '3' ? 'selected' : '')*/ ?>>Položka</option>
          <option value="4" <?php /*echo ($result['Typ'] == '4' ? 'selected' : '')*/ ?>>Vlastní sleva</option>
        </select>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label>Název:</label>
        <select class="form-select nazev-select" required>
          <option selected>Choose...</option>
          <option value="sub1">Applied Maths-1</option>
          <option value="sub2">Applied Physics-1</option>
          <option value="sub3">Applied Physics-2</option>
        </select>
      </div>
    </div>
    <!-- 其他元素保持不变 -->
  </div>
</div>

2. 优化克隆逻辑（移除模板ID，添加事件委托） #

移除模板的ID避免克隆后重复，同时通过父容器监听所有下拉框的变化事件，无需给新克隆元素单独绑定：

<script>
  var prvniPolozka = document.getElementById('sablona');
  // 移除模板ID，防止克隆后出现重复ID
  prvniPolozka.removeAttribute('id');
  var sablona = prvniPolozka.cloneNode(true);
  var indexPoradi = (2 + <?php echo $posledniVPoradi; ?>);

  function indexPlusJedna() {
    indexPoradi++;
  }

  function pridatPole() {
    var kopie = sablona.cloneNode(true);
    document.getElementById('polozky').appendChild(kopie);
    kopie.getElementsByTagName("input")[0].focus();
    kopie.getElementsByTagName("input")[1].value = indexPoradi;
    indexPlusJedna();
  }

  function odebrat(el) {
    var polozka = el.parentNode;
    polozka.parentNode.removeChild(polozka);
  }

  // 事件委托：监听所有typ-select的change事件
  document.getElementById('polozky').addEventListener('change', function(e) {
    if (e.target.classList.contains('typ-select')) {
      dynamicdropdown(e.target);
    }
  });
</script>

3. 重构联动函数（基于当前行定位目标下拉框） #

修改联动函数，通过DOM遍历找到当前行对应的第二个下拉框，确保每行联动独立：

function dynamicdropdown(selectEl) {
  var arr1 = ["oddělení 1", "oddělení 2"];
  var arr2 = ["skupina 1", "skupina 2"];
  var arr3 = ["polozka 1", "polozka 2"];
  var arr4 = ["sleva 1", "sleva 2"];
  
  // 定位当前下拉框所在的行容器
  var row = selectEl.closest('.polozka');
  // 找到该行对应的第二个下拉框
  var targetSelect = row.querySelector('.nazev-select');
  var selectedValue = selectEl.value;

  // 清空目标下拉框
  targetSelect.innerHTML = '';

  if (selectedValue === "1") {
    arr1.forEach(item => {
      targetSelect.innerHTML += `<option>${item}</option>`;
    });
  } else if (selectedValue === "2") {
    arr2.forEach(item => {
      targetSelect.innerHTML += `<option>${item}</option>`;
    });
  } else if (selectedValue === "3") {
    arr3.forEach(item => {
      targetSelect.innerHTML += `<option>${item}</option>`;
    });
  } else if (selectedValue === "4") {
    arr4.forEach(item => {
      targetSelect.innerHTML += `<option>${item}</option>`;
    });
  } else {
    // 默认添加提示选项
    targetSelect.innerHTML += '<option selected>Choose...</option>';
  }
}

核心原理 #

1. 类名替代ID：用类名标识下拉框，避免DOM中ID重复导致的选择错误。
2. 事件委托：通过父容器统一监听事件，克隆的新行自动继承监听逻辑，无需额外绑定。
3. 行内DOM查找：通过closest和querySelector定位当前行的目标下拉框，确保每行联动互不干扰。

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