克隆含Select2组件的Div时功能失效及报错解决问询

先给你捋清楚问题出在哪，再直接上能跑的代码：

你的代码里的核心问题 #

1. 克隆对象找错了：JS里写的$("#row_examenes").clone()，但你HTML里根本没这个ID的元素，实际要克隆的是那个.cloned的div
2. 重复ID乱套了：多个input都用txtinput0当ID，这本身就违反HTML规则，克隆后ID替换逻辑也混乱
3. Select2克隆方式错了：你克隆的是已经初始化过Select2的元素，这时候原生select已经被Select2替换成一堆自定义DOM了，直接克隆会带一堆无效结构
4. HTML语法错误：select标签里嵌套div是非法的，浏览器解析会出问题，而且clas还拼错了（少个s）
5. 报错的直接原因：document.getElementById("select"+i+"_chosen1")找不到元素，因为克隆的时候Select2还没生成这个_chosen的DOM，而且这步操作完全没必要

修正后的完整代码 #

HTML部分 #

<!-- 隐藏的模板，用来克隆的干净结构 -->
<div class="clone-template" style="width: 100%; display: none;">
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="username[]" placeholder="Enter Full Name" type="text" data-parsley-pattern="^[a-zA-Z\s.]+$" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="email[]" placeholder="Enter VALID EMAIL and check the result" type="email" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="phone[]" placeholder="Enter Phone e.g.: +363012345" type="text" data-parsley-pattern="^\+{1}[0-9]+$"/>
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <select class="select2-field" multiple="multiple" style="width: 100%;" data-placeholder="Select a company">
                <option value="1">Google</option>
                <option value="2">Amazon</option>
                <option value="3">Facebook</option>
                <option value="4">Airbnb</option>
            </select>
        </div>
    </div>
</div>

<!-- 第一个显示的实例 -->
<div class="clone-item" style="width: 100%;">
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="username[]" placeholder="Enter Full Name" type="text" data-parsley-pattern="^[a-zA-Z\s.]+$" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="email[]" placeholder="Enter VALID EMAIL and check the result" type="email" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control input-field" name="phone[]" placeholder="Enter Phone e.g.: +363012345" type="text" data-parsley-pattern="^\+{1}[0-9]+$"/>
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <select class="select2-field" multiple="multiple" style="width: 100%;" data-placeholder="Select a company">
                <option value="1">Google</option>
                <option value="2">Amazon</option>
                <option value="3">Facebook</option>
                <option value="4">Airbnb</option>
            </select>
        </div>
    </div>
</div>

<!-- 克隆元素的容器 -->
<div class="row box" id="clone-container"></div>
<button onclick="addRow()">添加新行</button>

JS部分 #

$(document).ready(function() {
    // 初始化第一个Select2
    $('.clone-item .select2-field').select2();
});

let cloneCount = 1;
function addRow() {
    // 克隆隐藏的干净模板，不是已经初始化过的元素
    const newClone = $('.clone-template').clone();
    // 去掉模板类，加上显示类并显示
    newClone.removeClass('clone-template').addClass('clone-item').show();
    
    // 给新元素加唯一ID（可选，方便后续操作）
    newClone.find('.input-field').each(function(idx) {
        $(this).attr('id', `input-${cloneCount}-${idx}`);
    });
    const newSelect = newClone.find('.select2-field');
    newSelect.attr('id', `select-${cloneCount}`);
    
    // 把克隆的元素放到容器里
    newClone.appendTo('#clone-container');
    
    // 初始化新的Select2
    newSelect.select2();
    
    cloneCount++;
}

为什么这么改？ #

• 模板分离：用隐藏的干净模板克隆，避免带Select2生成的多余DOM，保证每次克隆的都是原生的input和select
• 去掉重复ID：用class选元素，动态生成唯一ID，符合HTML规范，也避免ID冲突
• 修复HTML错误：去掉select里的div，option直接作为select的子元素，浏览器能正确解析
• 简化逻辑：用单个计数器跟踪克隆次数，不用两个变量绕来绕去
• 正确初始化Select2：把克隆元素加到DOM后再初始化，确保元素已经存在，不会出现找不到元素的错误

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