如何在selectpicker渲染完成后再显示该选择器？

问题原因 #

页面加载过程中，原生<select>元素会先被浏览器渲染显示，而selectpicker插件需要等待JS加载完成后才会初始化并替换原生控件，这就导致了短暂的样式闪现。

解决方案 #

通过初始隐藏控件容器/原生select，待selectpicker完全渲染完成后再显示的方式解决，具体有两种实现方式：

方法一：利用插件初始化完成事件显示容器

1. 给select元素包裹一个容器，并添加Bootstrap的d-none类（或自定义隐藏样式）初始隐藏：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<div class="select-container d-none">
  <select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
  </select>
</div>

2. 在JS中监听selectpicker的loaded.bs.select事件（插件初始化完成时触发），移除容器的隐藏类：

$(function () {
  $('select').selectpicker().on('loaded.bs.select', function() {
    $(this).closest('.select-container').removeClass('d-none');
  });
});

方法二：初始隐藏原生select，渲染后显示插件生成的控件

1. 添加CSS隐藏原生select：

.selectpicker {
  display: none !important;
}

2. 同样监听loaded.bs.select事件，确保插件生成的自定义控件正常显示：

$(function () {
  $('select').selectpicker().on('loaded.bs.select', function() {
    $(this).closest('.bootstrap-select').css('display', 'block');
  });
});

说明 #

loaded.bs.select是bootstrap-select官方提供的初始化完成事件，能准确捕捉到插件渲染完成的时机，避免过早显示导致的样式异常。

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