我正在尝试在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 注入到标题中。拉拉维尔的模板引擎。当我检查页面源代码时，它正确包含在选择选择器之后。

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

感谢您的任何帮助！

更新

我还在试图找出问题所在。问题是当我尝试使用选择器插件时，我不断收到错误。但我不明白缺少什么...

Bootstrap 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>

Bootstrap-select.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>