动态生成行中Select2失效求助：新增行无法选择选项

我明白你遇到的痛点——动态新增行后，第二行的Select2完全没法用，连Ajax搜索也失效了。这其实是因为克隆元素时，Select2已经对原始的<select>做了DOM改造，直接克隆会带着旧的Select2实例和绑定，导致新行的组件状态异常。下面给你一步步的解决方案：

问题根源分析 #

当你用clone(true)克隆行时，原来的<select>已经被Select2转换成了包含隐藏原始控件和自定义UI的结构。克隆出来的元素不仅带着旧的选中状态，还残留着已初始化的Select2实例，这些都会导致新行的组件无法正常工作。

解决方案步骤 #

1. 封装Select2初始化函数

首先把Select2的初始化逻辑抽成一个独立函数，方便每次新增行后调用：

var base_url = $('#base_url').val();

// 初始化Select2的函数
function initSelect2() {
    // 只给未初始化过的select元素初始化（避免重复操作）
    $('.itemName:not(.select2-hidden-accessible)').select2({
        placeholder: '--- Select Item ---',
        allowClear: true,
        ajax: {
            url: base_url + 'prescription/searchmed',
            dataType: 'json',
            delay: 250,
            processResults: function(data) {
                // 确保返回的数据符合Select2要求的id/text格式
                return {
                    results: data.map(item => ({
                        id: item.id,
                        text: item.item_name
                    }))
                };
            },
            cache: true
        }
    });
}

// 页面加载完成后先初始化一次原始行的Select2
$(document).ready(function() {
    initSelect2();
});

注意：如果你的后端返回的data已经是id+text格式，可以去掉map转换部分。另外，:not(.select2-hidden-accessible)是为了跳过已经初始化过的Select2元素，避免重复初始化报错。

2. 修改新增行的克隆逻辑

克隆行时，先销毁旧的Select2实例并清理残留的DOM，再添加新行并重新初始化：

var add_button = $('.add_button');
var delete_button = $('.delete_button');
var x = 1;
var max_field = 10; // 假设你的最大行数是10，根据实际调整

$(add_button).click(function() {
    if (x < max_field) {
        x++;
        // 克隆最后一行（保留事件绑定）
        var newRow = $("table tr:last").clone(true);
        
        // 处理新行里的Select2组件
        newRow.find('.itemName').each(function() {
            var $originalSelect = $(this);
            // 销毁旧的Select2实例
            if ($originalSelect.data('select2')) {
                $originalSelect.select2('destroy');
            }
            // 清空select的选中值
            $originalSelect.val('');
            // 移除Select2生成的容器（避免残留）
            $originalSelect.next('.select2-container').remove();
        });
        
        // 清空新行里其他输入框的值（如果需要）
        newRow.find(':input:not(.itemName)').val('');
        
        // 将新行添加到表格
        $("table").append(newRow);
        
        // 初始化新行里的Select2
        initSelect2();
    }
});

3. 修复HTML中的重复ID问题

你的原始<select>有id="medicine"，但动态新增行后会出现多个相同ID的元素，这会导致DOM操作异常。建议直接移除这个ID：

<select name="medicine[]" class="form-control calcEvent medicine itemName select2" required>
    <option>---Select Medicine ---</option>
    <?php $result = $this->db->get('db_items')->result(); foreach ($result as $medicine) { ?>
        <option value="<?php echo $medicine->id; ?>"><?php echo $medicine->item_name; ?></option>
    <?php } ?>
</select>

额外检查点 #

• 确认你的Ajax接口prescription/searchmed能正常返回JSON格式的数据，并且包含id和item_name字段。
• 打开浏览器控制台，查看是否有JS报错，比如跨域、接口404等问题，这些也会导致Ajax搜索失效。

按照上面的步骤修改后，新增行的Select2应该就能正常使用了，包括Ajax搜索功能也会恢复正常。

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