Select2下拉框对齐异常：下拉菜单显示于输入框上方且无法隐藏

以下是几种常见原因及解决方法：

• 未正确引入Select2的CSS文件
  这是最容易忽略的问题，只加载JS而漏掉CSS会直接导致样式错乱。必须在Select2的JS文件之前，先加载官方CSS：

  <link rel="stylesheet" href="select2.min.css">
  <script src="jquery.min.js"></script>
  <script src="select2.min.js"></script>
  

  注意jQuery要优先于Select2加载，且版本需匹配（推荐用jQuery 2.x或3.x，避免过于老旧的版本）。

• CSS层级（z-index）冲突
  页面中其他元素的z-index值过高，会把Select2下拉框压在文本框上方。可以强制给下拉框设置更高层级：

  .select2-dropdown {
    z-index: 9999 !important;
  }
  

  同时检查页面内绝对/固定定位的元素，调整它们的z-index避免冲突。

• 父元素定位限制
  如果下拉框的父元素或祖先元素设置了position: relative但未合理配置z-index，会限制Select2下拉框的层级范围。可以给父元素添加合适的z-index，或者把目标select元素移到定位更简单的容器中。

• JS初始化或冲突问题

  1. 确保正确调用了初始化代码：

     $(document).ready(function() {
       $('.js-example-basic-multiple').select2();
     });
     

  2. 排查页面内其他JS脚本的冲突，比如其他下拉插件、事件拦截代码。可以临时移除其他JS，测试是否恢复正常，逐步定位冲突源。

• 无法隐藏的事件拦截问题
  点击页面其他区域下拉框不关闭，大概率是其他JS阻止了点击事件冒泡。可以在初始化时将下拉框挂载到body上，避开父元素的事件影响：

  $('.js-example-basic-multiple').select2({
    dropdownParent: $('body')
  });
  

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