点击按钮新增含Select2的行时旧行还原为普通HTML的问题求助

点击按钮新增一行包含2个Select2组件的行时，新行的Select2能正常初始化，但旧行的Select2会变回普通HTML下拉框。相关代码如下：

HTML代码 #

<div class="modal fade" role="dialog" id="advanceModal">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 650px">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">{{ __('tm_absenteeism_data_entry_by_employee_no.label_check_if_activated') }}</h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-5">
                        <select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">
                            <option></option>
                            <option value="GroupCompany">{{ __('tm_absenteeism_data_entry_by_employee_no.label_group_company') }}</option>
                            <option value="Department">{{ __('tm_absenteeism_data_entry_by_employee_no.label_department') }}</option>
                            <option value="Location">{{ __('tm_absenteeism_data_entry_by_employee_no.label_location') }}</option>
                            <option value="WorkingUnit">{{ __('tm_absenteeism_data_entry_by_employee_no.label_working_unit') }}</option>
                            <option value="EmployeeType">{{ __('tm_absenteeism_data_entry_by_employee_no.label_employee_type') }}</option>
                            <option value="KelasCabang">{{ __('tm_absenteeism_data_entry_by_employee_no.label_kelas_cabang') }}</option>
                            <option value="Segmen">{{ __('tm_absenteeism_data_entry_by_employee_no.label_segmen') }}</option>
                            <option value="Position">{{ __('tm_absenteeism_data_entry_by_employee_no.label_position') }}</option>
                            <option value="KlasifikasiJabatan">{{ __('tm_absenteeism_data_entry_by_employee_no.label_klasifikasi_jabatan') }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="container">
                    <div class="mr-auto float-left">
                        <button type="button" class="btn btn-outline-primary" id="btn_add_filter" style="width: 100px; font-size: 12px;"><i class="fa fa-plus"></i> {{ __('tm_absenteeism_data_entry_by_employee_no.btn_add') }}</button>
                    </div>
                    <div class="float-right">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal" style="width: 100px; font-size: 12px;">Cancel</button>
                        <button type="button" class="btn btn-primary" id="btn_apply" style="width: 100px; font-size: 12px;">{{ __('tm_absenteeism_data_entry_by_employee_no.btn_apply') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript代码 #

$('#btn_add_filter').click(function() {
        var newRow = '<div class="row">' +
                        '<div class="col-5">' +
                            '<select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">' +
                                '<option></option>' +
                                '<option value="GroupCompany">Group Company</option>' +
                                '<option value="Department">Department</option>' +
                                '<option value="Location">Location</option>' +
                                '<option value="WorkingUnit">Working Unit</option>' +
                                '<option value="EmployeeType">Employee Type</option>' +
                                '<option value="KelasCabang">Kelas Cabang</option>' +
                                '<option value="Segmen">Segmen</option>' +
                                '<option value="Position">Position</option>' +
                                '<option value="KlasifikasiJabatan">Klasifikasi Jabatan</option>' +
                            '</select>' +
                        '</div>' +
                        '<div class="col-1">' +
                            '<div class="box-delete">' +
                                '<i class="fa fa-trash-o"></i>' +
                            '</div>' +
                        '</div>' +
                    '</div>';
        
        $('.modal-body .row:last').after(newRow);

        $('.modal-body .row:last .advance_label').select2({
            placeholder: "Select Filter"
        });

        $('.modal-body .row:last .advance_filter').select2({
            placeholder: "Select Filter"
        });
    }); 

1. 重复ID冲突：HTML要求页面内ID必须唯一，你给所有新增的select都用了id="advance_label"，和原始行的ID完全重复，导致DOM查询和Select2初始化时出现逻辑混乱，直接破坏了旧行已生成的Select2实例。
2. 无效的初始化操作：代码里尝试初始化.advance_filter类的元素，但不管是原始HTML还是新增的行里都没有这个类的元素，属于无意义操作，虽不直接导致旧行失效，但会造成不必要的资源浪费。
3. 原始行初始化缺失：从代码看，你可能没在页面加载时初始化原始行的Select2，或者后续操作间接覆盖了它。

1. 移除重复ID，改用类控制 #

把所有select的id="advance_label"属性删掉，只保留类名advance_label，确保每个DOM元素都是唯一的。同时给第二个Select2添加对应的类名advance_filter。

2. 修正新增行的HTML结构 #

补全需求里的第二个Select2组件，并且把name属性改成数组格式（方便表单提交时获取多个值）：

var newRow = '<div class="row">' +
                '<div class="col-5">' +
                    '<select class="form-control advance_label" name="advance_label[]" style="width: 100%">' +
                        '<option></option>' +
                        '<option value="GroupCompany">Group Company</option>' +
                        '<option value="Department">Department</option>' +
                        '<option value="Location">Location</option>' +
                        '<option value="WorkingUnit">Working Unit</option>' +
                        '<option value="EmployeeType">Employee Type</option>' +
                        '<option value="KelasCabang">Kelas Cabang</option>' +
                        '<option value="Segmen">Segmen</option>' +
                        '<option value="Position">Position</option>' +
                        '<option value="KlasifikasiJabatan">Klasifikasi Jabatan</option>' +
                    '</select>' +
                '</div>' +
                '<div class="col-5">' +
                    '<select class="form-control advance_filter" name="advance_filter[]" style="width: 100%">' +
                        '<option></option>' +
                        // 这里根据你的需求添加对应的选项
                    '</select>' +
                '</div>' +
                '<div class="col-1">' +
                    '<div class="box-delete">' +
                        '<i class="fa fa-trash-o"></i>' +
                    '</div>' +
                '</div>' +
            '</div>';

3. 正确初始化Select2元素 #

• 页面加载完成后，先初始化原始行的Select2：

$(document).ready(function() {
    // 初始化原始行的advance_label
    $('.modal-body .row:first .advance_label').select2({
        placeholder: "Select Filter"
    });
    // 如果原始行有advance_filter，也要初始化
    // $('.modal-body .row:first .advance_filter').select2({ placeholder: "Select Filter" });
});

• 点击新增按钮时，只针对当前新增的行初始化Select2，避免影响旧行：

$('#btn_add_filter').click(function() {
    var newRow = '...'; // 上面修正后的HTML字符串
    $('.modal-body .row:last').after(newRow);
    
    // 初始化新增行的advance_label
    $('.modal-body .row:last .advance_label').select2({
        placeholder: "Select Filter"
    });
    
    // 初始化新增行的advance_filter
    $('.modal-body .row:last .advance_filter').select2({
        placeholder: "Select Filter"
    });
});

4. 新增删除行的完善逻辑（可选） #

给删除按钮添加事件，删除前先销毁对应的Select2实例，避免内存泄漏：

$(document).on('click', '.box-delete', function() {
    // 销毁当前行所有Select2实例
    $(this).closest('.row').find('select').each(function() {
        $(this).select2('destroy');
    });
    // 删除当前行
    $(this).closest('.row').remove();
});

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