Select2仅对单个select生效，多下拉框使用相同类时失效问题求助

• 执行时机不匹配：$(document).ready 仅在页面初始DOM加载完成时执行一次，此时AngularJS的ng-repeat可能还没完成动态元素渲染，初始生成的多个下拉框可能没被捕获到；后续通过addNewChoice新增的下拉框也不会被自动初始化Select2效果。
• 重复ID冲突：所有动态生成的select元素都使用了相同的id="element"，违反了DOM ID唯一的规范，会导致jQuery选择器行为异常。

1. 修复重复ID问题 #

给动态生成的select添加索引后缀保证ID唯一：

<!-- 把原有select的id属性修改为带索引的格式 -->
<select id='element-{{$index}}' class="js-example-basic-single form-select" name="element-{{$index}}" ng-model="finalView.details" ng-change='setStatus()' required="true">

2. 适配动态渲染的初始化逻辑 #

推荐使用AngularJS指令实现，符合框架规范，能自动处理所有动态新增/删除的下拉框：

新增Select2初始化指令 #

// app为你当前的AngularJS模块名
app.directive('select2Init', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // 等待当前元素渲染完成后初始化Select2
      scope.$evalAsync(function() {
        $(element).select2();
      });
      // 元素销毁时清理Select2实例，避免内存泄漏
      scope.$on('$destroy', function() {
        $(element).select2('destroy');
      });
    }
  };
});

在select标签上绑定指令 #

<select select2-init id='element-{{$index}}' class="js-example-basic-single form-select" name="element-{{$index}}" ng-model="finalView.details" ng-change='setStatus()' required="true">

临时快速修复方案 #

如果不想修改框架逻辑，可以在新增元素的方法后补充初始化逻辑，跳过已初始化的元素：

// 先注入$timeout依赖到你的控制器
$scope.addNewChoice = function() {
  // 原有新增元素的逻辑保留
  // ...
  // 延迟到DOM渲染完成后初始化新增的Select2
  $timeout(function() {
    // 只给未初始化的下拉框挂载Select2效果
    $('.js-example-basic-single').not('.select2-hidden-accessible').select2();
  }, 0);
};

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