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

<script>

$(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?