Bootstrap使用bootstrap-select的坑[记录]

Bootstrap使用bootstrap-select的坑[记录]

• • 我的文件版本
  • 问题

我的文件版本

1、jQuery：3.6.0
2、Bootstrap：4.6.1
3、bootstrap-select.js：1.13.9

问题

1、多选下拉框的样式已经显，但是呢，下拉选项不显示，点击下拉框也没有反应。Chrome也没有错误信息。如下图

解决方法： 根据bootstrap-select官网描述，使用下拉框插件，必须引入jQueru-1.9+、bootstrap.css、bootstrap的dropdown.js(引入bootstrap.min.js和bootstrap.js就可以)。
还有一点，如果使用的bootstrap-4.0+版本，那么还需要引入Popper.js(以下)

<script src="https://unpkg/@popperjs/core@2/dist/umd/popper.js"></script>
<script src="https://unpkg/@popperjs/core@2"></script>

2、按照官网以及文件加载顺序导入以上文件，理论上就可以了。但不过还会有个问题dropdown.js中的 new poper() 不是构造函数。如下图

解决方法： 根据博客的解决方法。
引入以下代码

<script src="https://cdnjs.cloudflare/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

OK！完成以上后，就会像下图一样，可以继续愉快的使用Bootstrap的多选下拉框组件了