使用bootstrap select，我使用selectpicker初始化插件，这样我就不需要手动操作了：
https://developer.snapappointments.com/bootstrap-select/
将selectpicker类添加到您的select元素以自动初始化引导选择。
在我的页面中，这是我加载所有内容的方式（顺序相同）：
<!doctype html>
<head>
<link href="bootstrap-4.6.min.css" rel="stylesheet">
<link href="bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
<script src="jquery-3.6.1.min.js"></script>
<script src="bootstrap-4.6.min.js"></script>
<script src="bootstrap-select.min.js"></script>
<script src="myBootstrapSelectScript.js"></script>
</body>然后在myBootstrapSelectScript.js中初始化插件：
插件确实加载了，但看起来加载时有几毫秒时间还没有准备好，因为我在初始化代码下面有一个jQuery选择器，我得到了错误：
$( document ).ready(function() {
let buttons = $("button.btn.dropdown-toggle");
buttons.each(function() {
$(this).click();
}
});$("button.btn.dropdown-toggle")选择器用于bootstrap-select创建的按钮。
我收到错误"
未捕获的类型错误：无法读取未定义的属性（读取'click'）"
但如果我使用setTimeOut，它就可以工作：
setTimeout(() => {
let buttons = $("button.btn.dropdown-toggle");
buttons.each(function() {
$(this).click();
}
}, 2000}所以我尝试使用JavaScript版本的初始化，删除selectpicker类，并在myBootstrapSelectScript.js中手动初始化它：
$( document ).ready(function() {
$('my_select').selectpicker();
let buttons = $("button.btn.dropdown-toggle");
buttons.each(function() {
$(this).click();
}
});但是我得到了这个错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'length')所以看起来有些东西没有被正确加载，但是为什么呢？一切都是根据文档进行的
1条答案
按热度按时间3duebb1j1#
我认为这是你的脚本初始化的顺序，你能不能把你的Jquery / BS Select脚本移到头部，把BS留在身体的底部;输入后立即初始化BS选择组件，即：
这将使BS选择更快，甚至在页面呈现之前;给予看吧--在大多数情况下，组件初始化延迟源于页面上脚本的等级顺序;我之前有很多事情都无法按时呈现（添加超时是一个聪明的技巧/解决方案），但当我改变脚本顺序时，我注意到在整个页面加载之前组件的初始化有很大的不同。