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 tiene otra referencia de jquery.js que se está cargando después de bootstrap-select.min.js , eliminará la función $(...).selectpicker 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é.