【问题标题】：Can't refresh selectpicker无法刷新选择器
【发布时间】：2016-11-17 05:32:51
【问题描述】：

我正在尝试在 Silvio Moreto 的 Bootstrap 选择器上添加一些选项。

当我尝试在追加后更新它时，jquery 会抛出此错误：

Uncaught TypeError: $(...).selectpicker is not a function

我已经阅读过这是因为选择选择器没有完全初始化，但是如果我转到我的部分标题，选择选择器 js 和 css 会在尝试更新它的函数之前包含在内。

我还读到这应该在 $(function(){}); 块内完成。但由于执行该操作的文件是在 $(function(){}); 块内调用的普通函数文件，因此不应该出现问题。

这是我的标题文件：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>GMS</title>

<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link rel="stylesheet" href="{{url('css/general.css')}}">
<link rel="stylesheet" href="{{url('css/modal.css')}}">
<link rel="stylesheet" href="{{url('css/status_page.css')}}">
<link rel="stylesheet" href="{{url('css/dropdowns.css')}}">
<link rel="stylesheet" href="{{url('css/animator.css')}}">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!-- Bootstrap select with live src -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>


<!--
|-----------------------------------
|   Custom CSS
|-----------------------------------
-->
@section('css')@show


<!--
|-----------------------------------
|   Custom JS
|-----------------------------------
-->
<script src="{{url('js/general.js')}}"></script>
<script src="{{url('js/functions/functions.js')}}"></script>
<script src="{{url('js/functions/animator.js')}}"></script>

<script src="{{url('js/app/gms.js')}}"></script>
<script src="{{url('js/app/controllers/auth_controller.js')}}"></script>
<script src="{{url('js/app/controllers/redirect_controller.js')}}"></script>
<script src="{{url('js/app/controllers/changelog_controller.js')}}"></script>
<script src="{{url('js/app/factories/changelog_factory.js')}}"></script>
@section('js')@show

这是在选择中执行更改的函数：

function fillContracts(contracts) {
    for(var i = 0; i < contracts.length; i++)
    {
        console.log('Iterating');
        console.log('Contract ID: ' + contracts[i].id);
        console.log('Contract TITLE: ' + contracts[i].titolo);
        $('#selectpicker').html('<option>Test1</option><option>Test2</option>').selectpicker('refresh');
    }
    console.log('Done');
}

包含此函数的文件使用 Blade 注入到标题中。 Laravel 的模板引擎。当我检查页面源时，它被正确地包含在选择器之后。

如果可能有帮助，我尝试附加的数据来自 AJAX 调用。但是我不知道怎么了...

感谢您的帮助！

更新

我仍在试图找出问题所在。问题是我在尝试使用 selectpicker 插件时不断收到错误消息。但我不明白缺少什么......

引导 CSS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

jquery：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

引导选择.min.css

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

还有 bootstrap-select.min.js：

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

【问题讨论】：

您似乎没有在页面中包含 selectPicker 插件 JS 文件
@Rory McCrossan 但是在官方网站上并没有关于那个...我在哪里可以找到这个文件？
silviomoreto.github.io/bootstrap-select
我仍然遇到同样的错误:(

标签： javascript jquery twitter-bootstrap laravel

【解决方案1】：

我是如何解决这个问题的 Bootsrap select.js 作为最后一个脚本包含

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

如果它继续给您带来问题。 避免 selectpicker(refresh) 并通过 javascript 方式填充选择框

<script>
    document.getElementById("selectboxID").innerHTML = '<option>Test1</option><option>Test2</option>';
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

【讨论】：