为动态创建的内容应用Select2插件问题咨询

嘿，这个坑我之前踩过！问题出在Select2只会自动初始化页面加载时就存在的DOM元素，你克隆出来的第二行是动态生成的，原来的全局$('.select2').select2()调用根本不会识别到这个新元素。而且你直接在return前重新全局调用，还会重复初始化已经生效的Select2组件，反而可能引发其他问题。

给你几个靠谱的解决方案，按场景选：

方案一：克隆后单独初始化新元素（最常用） #

先确保页面加载时只初始化原本存在的Select2，然后在克隆完成后，只针对新生成的那一行里的选择框初始化Select2：

// 页面加载时初始化原有select2
$(document).ready(function() {
  $('.select2').select2();
});

// 你的克隆按钮/链接点击事件
$('#clone-link').click(function() {
  // 克隆目标行（这里假设你的商品行有统一类名，比如.item-row）
  var newRow = $('.item-row').first().clone(true);
  
  // 可选：清空新行的选中值，避免和原行重复
  newRow.find('.select2').val(null);
  
  // 把新行添加到页面容器里
  $('#order-container').append(newRow);
  
  // 关键！只初始化新行里的select2元素
  newRow.find('.select2').select2();
  
  return false;
});

方案二：克隆前先销毁原元素的Select2（避免克隆改造后的DOM） #

如果你的原行已经被Select2改造成了复杂的DOM结构（比如带下拉菜单的容器），直接克隆会带上这些多余的元素，导致新的Select2无法正常初始化。这时候可以先销毁原元素的Select2，还原成原生select再克隆：

$('#clone-link').click(function() {
  var originalRow = $('.item-row').first();
  // 先销毁原行的Select2，还原成原生select
  originalRow.find('.select2').select2('destroy');
  
  // 克隆原行
  var newRow = originalRow.clone(true);
  
  // 重新初始化原行的Select2（因为刚才销毁了）
  originalRow.find('.select2').select2();
  
  // 添加新行并初始化它的Select2
  $('#order-container').append(newRow);
  newRow.find('.select2').select2();
  
  return false;
});

为什么你之前的方法没用？ #

你之前加的$('.select2').select2()会遍历所有带select2类的元素，包括已经初始化过的。Select2对已初始化的元素重复调用会忽略或者报错，而新元素可能因为还没完全插入DOM（或者遍历的时候还没被选中），导致没被正确初始化。针对性地只初始化新生成的元素才是正确的做法。

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