动态初始化Select2组件异常：新增元素后原元素Select2失效

问题原因 #

1. 重复ID冲突：每次生成新的select元素时都使用了相同的id='cntType'，违反HTML中ID必须唯一的规范，会导致DOM选择器行为异常。
2. 重复初始化破坏实例：每次点击按钮后调用$('.select2').select2()，会对所有带有select2类的元素重新初始化，包括已经创建好的Select2实例，这会直接销毁原有实例并重建，导致之前的元素失去Select2功能。

解决方案 #

核心修改点 #

• 移除重复的ID属性，或生成唯一ID
• 仅对新添加的select元素初始化Select2，避免影响已存在的实例

修改后的代码 #

$(document).ready(function(){
  $("#packages #add_package").on("click", function(){
    // 构建新的卡片元素（移除重复ID）
    const newPackageCard = $(`
      <div class='col-12 packageCard'>
        <div class='col-4'>
          <div class='form-group'>
            <label>Container Type</label>
            <select name='cntType' class='form-control select2' data-dropdown-css-class='select2' style='width: 100%;'>
              <option value='0' selected disabled>Select Container Type</option>
              <option>20 feet</option>
              <option>40 feet</option>
            </select>
          </div>
        </div>
      </div>
    `);
    
    // 插入到按钮前方
    $(this).before(newPackageCard);
    
    // 仅初始化新添加的select元素
    newPackageCard.find('.select2').select2();
  });
})

进阶优化（支持唯一ID与数组式表单提交） #

如果需要为每个select设置唯一ID，或让后端能批量接收多个容器类型的值，可以添加计数器生成唯一标识：

$(document).ready(function(){
  let packageIndex = 0;
  
  $("#packages #add_package").on("click", function(){
    packageIndex++;
    
    const newPackageCard = $(`
      <div class='col-12 packageCard'>
        <div class='col-4'>
          <div class='form-group'>
            <label>Container Type</label>
            <select name='cntType[]' id='cntType-${packageIndex}' class='form-control select2' data-dropdown-css-class='select2' style='width: 100%;'>
              <option value='0' selected disabled>Select Container Type</option>
              <option>20 feet</option>
              <option>40 feet</option>
            </select>
          </div>
        </div>
      </div>
    `);
    
    $(this).before(newPackageCard);
    newPackageCard.find('.select2').select2();
  });
})

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