Bootstrap下拉框出现双重显示的原因及解决方法

嘿，我来帮你排查这个双重下拉框的问题～结合你给出的代码和截图，咱们一步步分析：

可能的原因 #

• HTML语法错误：你代码里的<select>闭合标签写错了，写成了</select （少了右尖括号>），浏览器解析这种不完整的标签时，很容易出现渲染异常，导致额外的下拉元素出现。
• 重复引入插件资源：如果你的页面里多次引入了Bootstrap Select的CSS或JS文件，会导致插件重复初始化，生成两层下拉框。
• 原生select未被正确隐藏：Bootstrap Select插件会生成自定义的下拉容器，同时应该把原生的<select>元素隐藏。如果插件的CSS没加载成功，或者初始化失败，原生select就会和自定义下拉框同时显示。
• 插件初始化时机不对：如果在DOM还没完全加载完成时就调用了初始化方法，可能导致渲染不完整，出现重复下拉的情况。

对应的解决办法 #

• 修复HTML语法问题：把<select>的闭合标签改成正确的</select>，同时给select添加selectpicker类（这是Bootstrap Select识别元素的默认类），修改后的代码如下：

<div class="row">
  <div class="col-sm-3 col-md-3">
    <label for="degree"><strong>Stage/Level</strong></label>
    <select class="form-control selectpicker" id="sel1">
      <option>Select stage/level</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

• 检查资源引入：确保页面里只引入一次Bootstrap Select的CSS和JS文件，并且要放在jQuery和Bootstrap JS之后：

<!-- 仅引入一次Bootstrap Select样式 -->
<link rel="stylesheet" href="bootstrap-select.min.css">
<!-- 仅引入一次Bootstrap Select脚本 -->
<script src="bootstrap-select.min.js"></script>

• 确保原生select被隐藏：检查Bootstrap Select的CSS文件路径是否正确，正常加载后原生select会被自动设置为display: none;，如果路径有误及时修正即可。
• 正确初始化插件：把初始化代码放在DOM加载完成的回调里，确保目标元素已经存在：

$(document).ready(function() {
  $('#sel1').selectpicker();
});

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