Select2搭配Formsets仅首个表单生效 其余动态表单无响应如何修复

1. 页面加载初始化代码修改 #

将原页面加载阶段的初始化代码替换为通用匹配逻辑：

$(document).ready(function() {
    // 匹配所有id符合规则、且未初始化过select2的字段
    $('[id^="id_membership-"][id$="-company"]:not(.select2-hidden-accessible)').select2();
});

2. addRow函数修改 #

替换原有写死id的逻辑，改为自动匹配新增字段：

function addRow() {
    function activateForms(){
        // 自动匹配所有符合规则的未初始化字段，无需写死序号
        $('[id^="id_membership-"][id$="-company"]:not(.select2-hidden-accessible)').select2();
    }
    setTimeout(activateForms, 1000);
}

• 选择器[id^="id_membership-"][id$="-company"]会匹配所有id以id_membership-开头、以-company结尾的元素，无论中间的序号是多少，不需要提前预设所有id，也不需要修改原有字段的class属性
• 伪类:not(.select2-hidden-accessible)会过滤掉已经完成select2初始化的元素，避免重复初始化导致的字段异常、重复生成表单的问题
• 新增任意数量表单后，执行激活逻辑时都会自动识别未初始化的新字段完成挂载

如果可以控制新增表单的逻辑，建议在新表单DOM插入完成后直接调用activateForms()，不需要设置固定延迟，避免性能波动时1秒等待时间不足的问题。

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