Question

我正在使用bootstrap-select表单。我在HTML文件的标题中包含脚本（jquery，bootstrap-select）。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

所有带有类＆＃34; selectpicker＆＃34;的选择元素一切都正确。 select元素的示例：

<select id="test" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
</select>

但是，如果我在同一页面上调用以下脚本

<script>
$(document).ready(
    function () {
        $('#test').selectpicker('val', 'Relish')
});
</script>

我收到了这个令人讨厌的错误

$（...）。selectpicker不是函数

查看Google Chrome中的“来源”标签，我看到bootstrap-select.min.js加载得很好。有人有建议吗？

Answer 1

如果您在 bootstrap-select.min.js 之后加载了另一个jquery.js引用，则会清除$(...).selectpicker函数和其他函数。确保最后加载了bootstrap-select.min.js。

Answer 2

尝试在bootstrap-select之前加载bootstrap; - ）

<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

Answer 3

无论出于何种原因，这都需要通过 jquery 调用

$("#MyDropDown").selectpicker('render');

这个（非 jquery）产生错误：

mdd = document.getElementById("MyDropDown");
mdd.selectpicker('render');

我很想知道为什么。

$（...）。selectpicker不是一个函数

3 个答案: