动态插入含Select2的DOM元素后组件失效、AJAX异常如何解决

根因说明 #

你现有代码的核心问题是：每次新增行后都会选中所有带select2类的元素执行无配置初始化，会覆盖已经初始化完成的Select2配置（比如你最开始给#pelanggan设置的AJAX配置会被直接清空），同时重复初始化也会导致原有Select2的事件绑定失效，最终出现功能异常、AJAX不触发的问题。

修复方案 #

二选一即可，优先推荐方案1：

方案1：仅对新插入的Select2单独初始化（高效无冲突） #

你每次新增的产品下拉框ID为produk_+当前索引，直接选中该元素单独初始化，不会影响其他已经存在的Select2元素。
修改add_transaksi函数的最后一行代码：

// 替换原来的 $('.select2').select2();
$('#produk_' + index).select2({
  // 如有产品下拉的特殊配置可在这里添加，无特殊需求可留空或仅加宽度配置
  width: '100%'
});

方案2：全局筛选未初始化的Select2统一初始化（适合多类动态场景） #

如果存在多个不同类型的动态Select2，可通过筛选排除已经初始化过的元素，避免重复初始化：

// 替换原来的 $('.select2').select2();
$('.select2').not(function() {
  // Select2初始化后会在原元素后插入class为select2-container的容器，以此判断是否已初始化
  return $(this).next().hasClass('select2-container');
}).select2();

额外注意事项 #

你当前在JS函数的innerHTML中嵌套了PHP代码，PHP是服务端预执行的语言，只会在页面首次加载时运行一次，后续调用add_transaksi新增的下拉选项不会动态更新。如果你的产品列表需要实时更新，建议将产品列表提前存入JS全局变量，动态生成选项时读取该变量即可。

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