如何避免Ajax加载Select2时重复创建.icon下拉选择框？

这个问题的核心原因是：你每次切换.project下拉框时，虽然用$("#result").html(data)替换了目标区域的内容，但之前初始化的Select2组件没有被正确销毁。Select2在初始化时会把原<select>元素隐藏，同时在它旁边生成一套自定义的DOM结构（比如.select2-container）。当旧的<select>被替换后，这些Select2生成的额外DOM节点并没有自动被移除，所以看起来像是每次切换都新增了一个选择框。

修复方案 #

在更新#result内容之前，先手动销毁已存在的Select2实例，再加载新内容并初始化新的Select2：

修改你的script.js中的AJAX成功回调部分：

$(document).off("change", ".project").on("change", ".project", function (event) {
  $.ajax({
    url: "update.php",
    data: { },
    type: "POST",
    success: function (data) {
      // 第一步：销毁旧的Select2实例，清理残留DOM
      $("#result .icons").select2('destroy');
      // 第二步：替换#result的内容
      $("#result").html(data);
      // 第三步：初始化新的Select2组件
      $(".icons").select2({
        templateResult: formatState,
        templateSelection: formatState_select
      });
    }
  })
});

额外优化建议 #

如果你的.project下拉框是页面加载时就存在的静态元素（不需要动态生成），可以把事件绑定直接放在元素上，这样比委托到document更高效：

$(".project").on("change", function (event) {
  $.ajax({
    url: "update.php",
    data: { },
    type: "POST",
    success: function (data) {
      $("#result .icons").select2('destroy');
      $("#result").html(data);
      $(".icons").select2({
        templateResult: formatState,
        templateSelection: formatState_select
      });
    }
  })
});

注意：要确保formatState和formatState_select这两个自定义模板函数是已定义的，否则Select2初始化会报错哦。

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