Select2 jQuery与行克隆整合问题：表单提交数据无法存入数据库

问题根源 #

• 重复引入jQuery：页面同时加载两个版本的jQuery，导致Select2运行异常，无法同步选中值到原select元素
• 表单元素name未数组化：克隆后的同名表单元素提交时会被覆盖，后端无法接收多条数据
• 克隆行未处理Select2实例：直接克隆带Select2的行时，原插件生成的DOM会被复制，但新行的Select2未初始化，选中值无法同步到表单
• 多余的手动选中逻辑：Select2会自动同步选中值到原select，手动修改selected属性会干扰插件正常工作

修复后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<form method="post" action="你的提交地址">
<table>
  <tr class="tr_clone">
    <td>
      <input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
      <select name="animal[]" class="select2">
        <option value="cow">cow</option>
        <option value="horse">horse</option>
        <option value="dog">dog</option>
        <option value="cat">cat</option>
      </select>
      &nbsp;
      <select name="vehicle[]" class="select2">
        <option value="car">car</option>
        <option value="ship">ship</option>
        <option value="plane">plane</option>
      </select>
      &nbsp;
      <input name="remarks[]" type="text">
      <br>
      <hr>
    </td>
  </tr>
</table>
<button type="submit">提交表单</button>
</form>

<script>
$(document).ready(function() {
    // 初始化所有Select2
    initSelect2();

    // 克隆行事件处理
    $('body').on('click', 'input.tr_clone_add', function() {
        var $tr = $(this).closest('.tr_clone');
        // 克隆前销毁原行的Select2实例，避免无效DOM被复制
        $tr.find('.select2').select2('destroy');
        var $clone = $tr.clone();
        // 清空克隆行的表单值
        $clone.find('select').val('');
        $clone.find('input[type="text"]').val('');
        // 插入克隆行
        $tr.after($clone);
        // 重新初始化克隆行的Select2
        initSelect2();
    });
});

// 封装Select2初始化函数
function initSelect2() {
    $('.select2:not(.select2-hidden-accessible)').select2({
        width: 'auto'
    });
}
</script>

关键修复点 #

1. 移除重复jQuery：仅保留一个稳定版本的jQuery，消除版本冲突
2. 表单name数组化：将animal改为animal[]，vehicle改为vehicle[]，remarks改为remarks[]，后端可通过数组接收多条数据
3. 克隆前后处理Select2：克隆前销毁原行的Select2实例，克隆后重新初始化新行的插件，确保新下拉框正常工作
4. 删除冗余代码：移除手动设置selected属性的逻辑，依赖Select2自身的同步机制

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