$(…).selectpicker is not a function

问题:

I am using bootstrap-select for a form. I include the scripts (jquery, bootstrap-select) in the header of the HTML file.

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

All the select elements with class "selectpicker" all called correctly. Example of the select element:

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

However, if I call the following script on the same page

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

I get this nasty error

$(...).selectpicker is not a function

Looking at the sources tab in Google Chrome, I see that the bootstrap-select.min.js is loaded well. Has anyone got suggestions?

回答1:

If you have another jquery.js reference that is loading after bootstrap-select.min.js it will wipe out $(...).selectpicker function and other functions. Make sure that bootstrap-select.min.js is loaded last.

回答2:

Try to load bootstrap before bootstrap-select ;-)

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

文章来源: $(…).selectpicker is not a function