如何为Select2的select2-container容器设置自定义ID

Select2 原生支持对自动渲染生成的select2-container容器设置自定义ID、追加自定义CSS类，不需要修改框架源码，具体实现方式如下：

• 方法1：直接配置自定义CSS类（最推荐，适配所有场景）
  如果你只是需要给容器加指定CSS类，完全不需要额外设置自定义ID，Select2初始化时提供了专门的containerCssClass配置项，传入的类名会直接追加到容器的class属性上，不会覆盖框架自带的默认类名，示例代码：

  $(document).ready(function () {
    $("#input_16").select2({
      // 多个自定义类用空格分隔即可
      containerCssClass: "custom-filter-dropdown small-width-select"
    });
  });
  

• 方法2：给容器设置自定义ID
  如果确实需要给容器指定自定义ID，可以在Select2初始化完成后，通过实例上存储的容器引用直接修改ID属性即可。注意不要修改Select2自动生成的data-select2-id属性，该属性是框架内部做元素关联、事件绑定用的，手动修改会导致下拉定位、选中交互异常，示例代码：

  $(document).ready(function () {
    // 初始化Select2并保存实例引用
    const selectIns = $("#input_16").select2();
    // 给生成的外层容器设置自定义ID
    selectIns.data('select2').$container.attr('id', 'select-container-location-type');
    // 也可以在这里直接给容器追加自定义类
    selectIns.data('select2').$container.addClass('custom-filter-dropdown');
  });
  

避坑提示：不要用$("#input_16").next(".select2-container")这类DOM相邻选择器查找容器，当你配置了dropdownParent参数、或者Select2版本更新调整DOM结构时，这种写法会失效，通过Select2实例拿容器引用的方式兼容性是最好的。

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