$(…).selectpicker no es una función

Estoy usando bootstrap-select para un formulario. Incluyo los scripts (jquery, bootstrap-select) en el encabezado del archivo HTML.

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

Todos los elementos seleccionados con la clase “selectpicker” se llamaron correctamente. Ejemplo del elemento seleccionado:

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

Sin embargo, si llamo al siguiente script en la misma página

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

me sale este desagradable error

$(…).selectpicker no es una función

Mirando la pestaña de fuentes en Google Chrome, veo que bootstrap-select.min.js está bien cargado. ¿Alguien tiene sugerencias?

si tienes otro jquery.js referencia que se está cargando después bootstrap-select.min.js se borrará $(...).selectpicker función y otras funciones. Asegúrese de que bootstrap-select.min.js se cargue en último lugar.

Intenta cargar bootstrap antes de 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>

Por alguna razón, esto debe llamarse a través de jquery

$("#MyDropDown").selectpicker('render');

Esto (no jquery) genera el error:

mdd = document.getElementById("MyDropDown");
mdd.selectpicker('render');

Me interesa saber por qué.