使用Select2实现下拉功能时出现定位异常该如何解决

可能的原因及解决方法 #

• 未正确引入Select2配套CSS文件
  仅引入JS文件不引入对应CSS会导致组件样式缺失，是位置错乱最常见的诱因，需确保引入的Select2 JS和CSS版本匹配，无缺失。
• 父元素定位属性影响定位上下文
  如果Select组件的父级元素设置了position: relative/transform/overflow等会改变定位上下文的CSS属性，Select2默认将下拉框挂载到body节点的逻辑就会出现坐标计算错误，导致错位。
  可通过指定下拉框挂载节点解决，修改初始化代码如下：

  $(document).ready(function() {
      $(".js-Selector").select2({
          dropdownParent: $(".js-Selector").parent()
      });
  });
  

• 自定义CSS样式冲突
  全局设置的select、div通用样式或者自定义类样式覆盖了Select2的默认样式规则，可通过浏览器开发者工具检查Select2生成的.select2-container相关元素的样式，定位冲突规则后调整优先级即可。
• 初始化时元素未完成布局
  如果该Select组件位于隐藏容器中，或者页面有其他异步渲染的元素在Select2初始化后才修改布局，会导致坐标计算错误。可等待容器显示、页面布局稳定后再执行Select2初始化，或在布局更新后调用$(".js-Selector").trigger('change')触发组件重绘。

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