selectpicker is not a function（bootstrap-select无法动态加载数据）

现象：

使用了bootstrap-select插件，前端无法显示动态数据，查看元素又看到已经生成了数据，说明是渲染问题。
在这里插入图片描述

还提示：
$(…).selectpicker is not a function

代码结构：

js引用

1
2
3
4

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

html代码

1
2
3

问题排查

google后大部分答案是boot-select js 必须是最后引用。
刚开始只是查看js引用的顺序，发现并没有错，boot-select js是最后才引用到。
然后F12调试发现，调用后boot-select js 后再次调用了jquery js脚本。这样就会导致boot-select失效了。
在这里插入图片描述
排查很久才发现，自己的html额外添引用了一个jquery js脚本。立马删掉后，恢复正常。现在查看，boot-select js已经最后引用了。

前端数据也回来了。selectpicker 函数不存在的问题也解决了。

总结

$(’.selectpicker’).selectpicker(‘refresh’); 这句是必须的加的，要不然显示会有问题。

作为前端的新手，排查js问题的时候，确实还是要多看F12的执行顺序，不能觉得自己的js引用顺序没问题，就觉得顺序没问题了。处处是坑