克隆表单依赖下拉列表时ID匹配失效致联动异常解决方案

问题现象 #

实现了带依赖联动关系的下拉列表组，配套按钮用于复制/克隆表单模块：颜色下拉选择框的可选项会根据商品类目下拉框的选中值动态渲染。执行克隆操作生成新的下拉列表组后，原有联动逻辑无法正常生效，即使手动修改克隆后下拉列表的ID属性，仍无法正确匹配同组内两个下拉列表的ID对应关系。
原有实现代码如下：

var count = 1;
var duplicate_div = document.getElementById('duplicate_1');

function addRecord() {
  var clone = duplicate_div.cloneNode(true);
  clone.id = "duplicate_" + ++count;
  duplicate_div.parentNode.append(clone);
  var cloneNode = document.getElementById(clone.id).children[0];

  $(clone).find("*[id]").each(function() {
    $(this).val('');
    var tID = $(this).attr("id");
    var idArray = tID.split("_");
    var idArrayLength = idArray.length;
    var newId = tID.replace(idArray[idArrayLength - 1], count);
    $(this).attr('id', newId);
  });
}

$(document).ready(function() {
  $("#item_" + count).change(function() {
    var val = $(this).val();
    if (val == "shirt") {
      $("#color_" + count).html("<option>Black</option> <option>Gray</option>");
    } else if (val == "pants") {
      $("#color_" + count).html("<option>Blue</option> <option>Brown</option>");
    } else if (val == "shoe") {
      $("#color_" + count).html("<option>White</option> <option>Red</option>");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="select-form">
  <div class="duplicate" id="duplicate_1">
    <br>
    <label>item</label>
    <select id="item_1">
      <option value="template" disabled selected></option>
      <option value="shirt">Shirt</option>
      <option value="pants">Pants</option>
      <option value="shoe">Shoe</option>
    </select>

    <label>color</label>
    <select id="color_1">
      <option disabled selected>Select item first</option>
    </select>
  </div>
</form>
<br><br>
<button type="button" id="add-button" onclick="addRecord()">add</button>

故障原因 #

• 事件仅绑定给初始渲染的第一组下拉框：页面加载完成时只给#item_1绑定了change事件，后续动态克隆生成的新下拉框没有绑定联动逻辑，选中值时不会触发任何操作
• 元素查找逻辑硬编码全局变量：事件回调里固定用初始化时的count=1查找颜色下拉框，就算手动给新元素绑定事件，也只会修改第一组的颜色选项，无法匹配同组元素

修复方案 #

做两个核心调整即可解决：

• 用事件委托替代静态事件绑定：把change事件绑定到静态存在的父容器（比如form.select-form）上，匹配所有商品类目下拉框，后续动态新增的元素会自动继承事件，不需要重复绑定
• 废弃全局count匹配逻辑：触发类目选择事件时，先定位当前下拉框所属的.duplicate组容器，再在当前组内查找对应的颜色下拉框，完全规避ID匹配错误的问题

修复后的完整JS代码如下：

var count = 1;
var duplicate_div = document.getElementById('duplicate_1');

function addRecord() {
  var clone = duplicate_div.cloneNode(true);
  clone.id = "duplicate_" + ++count;
  duplicate_div.parentNode.append(clone);

  // 重置克隆块内的表单值和ID
  $(clone).find("*[id]").each(function() {
    $(this).val('');
    var tID = $(this).attr("id");
    var idArray = tID.split("_");
    var idArrayLength = idArray.length;
    var newId = tID.replace(idArray[idArrayLength - 1], count);
    $(this).attr('id', newId);
  });
  // 重置克隆块内颜色下拉框的默认提示
  $(clone).find('select[id^="color_"]').html('<option disabled selected>Select item first</option>');
}

$(document).ready(function() {
  // 事件委托绑定到静态父容器，匹配所有item开头的下拉框
  $('.select-form').on('change', 'select[id^="item_"]', function() {
    var val = $(this).val();
    // 找到当前下拉所在的组，再找组内的颜色下拉框，不需要靠ID数字匹配
    var $currentGroup = $(this).closest('.duplicate');
    var $colorSelect = $currentGroup.find('select[id^="color_"]');
    
    if (val == "shirt") {
      $colorSelect.html("<option>Black</option> <option>Gray</option>");
    } else if (val == "pants") {
      $colorSelect.html("<option>Blue</option> <option>Brown</option>");
    } else if (val == "shoe") {
      $colorSelect.html("<option>White</option> <option>Red</option>");
    }
  });
});

补充：如果后续不需要靠ID做其他业务逻辑，甚至可以完全去掉ID修改的逻辑，靠DOM结构的相对关系查找同组元素即可，稳定性更高。

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