无法刷新selectpicker

Question

我试图在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

这是在select：

中执行更改的函数

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插件时，我不断收到错误。但是我无法理解失踪的东西......

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>

自举-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>

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