JQuery/Select2设置width=100%加载时出现UI闪烁，如何解决？

这个问题是Select2初始化过程中很常见的「无样式闪烁」（FOUC, Flash of Unstyled Content），原因是浏览器先渲染了原生的<select>元素，之后才执行JS把它转换成Select2组件，这中间的时间差就导致了视觉跳变。这里给你几个实用的解决办法：

方法1：预先给原生select设置100%宽度 #

既然你的Select2最终要设置成width:100%，那直接让原生select一开始就继承这个宽度，这样即使短暂显示，也和最终的Select2组件尺寸一致，不会出现闪烁。

方案A：内联样式直接写在HTML里 #

修改你的HTML代码：

<label>
  <select id="mySelectBox" style="width: 100%;"> ... </select>
</label>
<label>
  <select id="mySelectBox2" style="width: 100%;"> </select>
</label>

方案B：用CSS统一设置 #

如果有多个Select2组件，可以写个通用的CSS类：

/* 给所有要转换成Select2的select加这个类 */
.select2-preinit {
  width: 100%;
}

然后给HTML里的select加上这个类：

<select id="mySelectBox" class="select2-preinit"> ... </select>

方法2：用CSS隐藏原生select直到初始化完成 #

如果不想让原生select显示哪怕一瞬间，可以用CSS预先隐藏它，等Select2初始化完成后，组件会自动给原生select加上select2-hidden-accessible类来隐藏它。

添加以下CSS：

/* 初始隐藏目标select */
#mySelectBox, #mySelectBox2 {
  visibility: hidden;
  height: 0;
  padding: 0;
  border: 0;
}

/* 确保Select2初始化后原生select保持隐藏 */
.select2-hidden-accessible {
  visibility: hidden !important;
}

这种方式完全避免了原生select的显示，缺点是如果JS加载失败，select会一直隐藏，所以可以结合<noscript>标签做降级：

<noscript>
  <style>
    #mySelectBox, #mySelectBox2 {
      visibility: visible;
      height: auto;
      padding: initial;
      border: initial;
    }
  </style>
</noscript>

方法3：提前初始化（用原生DOM事件） #

把初始化代码放在<head>里的DOMContentLoaded事件中，它的触发时机比$(document).ready略早一点，能缩短闪烁的时间：

document.addEventListener('DOMContentLoaded', function() {
  $('#mySelectBox').select2({width: '100%'});
  $('#mySelectBox2').select2({width: '100%'});
});

不过这个方法的效果可能不如前两种明显，因为浏览器的渲染时机还是可能早于JS执行。

我个人最推荐方法1，简单直接，不需要额外的隐藏逻辑，还能保证JS失效时select依然正常显示。

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