Estoy tratando de cargar el paquete un poco como instalar a través de CDN, pero soy un fanático y no tengo mucho conocimiento sobre esto. En el sitio hay un tutorial sobre cómo instalar el paquete a través de NPM, pero no tengo idea de qué es ni cómo funciona. Estoy buscando una solución más fácil, pero no entiendo cómo cargar la biblioteca MDB 5 Pro.
Lo que hice ahora fue esto:
Qué estoy haciendo mal ?
Violín: https://jsfiddle.net/snake93/9dger1b0/12/
<link href="https://motustrength.it/MDBootstrap-5-pro/css/mdb.min.css" rel="stylesheet"> <script type="text/javascript" src="https://motustrength.it/MDBootstrap-5-pro/js/mdb.min.js"></script> <select class="mdb-select md-form" searchable="Search here.."> <option value="" disabled selected>Choose your car</option> <option value="2" data-secondary-text="Production year: 2012">Volkswagen Passat</option> <option value="3" data-secondary-text="Production year: 2017">Subaru Legacy</option> <option value="3" data-secondary-text="Production year: 2015">Hyundai Elantra</option> <option value="3" data-secondary-text="Production year: 2019">Honda Civic</option> <option value="3" data-secondary-text="Production year: 2016">Audi A6</option> </select> // Material Select Initialization $(document).ready(function() { $('.mdb-select').materialSelect(); });Debe importar jQuery antes de MDB y otros scripts. Entonces, agregue esto a su código HTML.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>El código final se ve así.
<link href="https://motustrength.it/MDBootstrap-5-pro/css/mdb.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" src="https://motustrength.it/MDBootstrap-5-pro/js/mdb.min.js"></script> <select class="mdb-select md-form" searchable="Search here.."> <option value="" disabled selected>Choose your car</option> <option value="2" data-secondary-text="Production year: 2012">Volkswagen Passat</option> <option value="3" data-secondary-text="Production year: 2017">Subaru Legacy</option> <option value="3" data-secondary-text="Production year: 2015">Hyundai Elantra</option> <option value="3" data-secondary-text="Production year: 2019">Honda Civic</option> <option value="3" data-secondary-text="Production year: 2016">Audi A6</option> </select>Lo hice yo mismo. Me di cuenta de que el código Html debe insertarse antes de MDB Js. Además, estaba usando la clase incorrecta para seleccionar, estaba confundido, estaba usando la clase de selección de MDB 4.
https://jsfiddle.net/snake93/9dger1b0/32/
<!-- MDB icon --> <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> <!-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> <!-- MDB CSS--> <link rel="stylesheet" href="https://motustrength.it/MDB5-Pro/css/mdb.min.css" /> <!--your code here--> <select class="select" data-mdb-option-height="44"> <option value="1" data-mdb-secondary-text="Secondary text">One</option> <option value="2" data-mdb-secondary-text="Secondary text">Two</option> <option value="3" data-mdb-secondary-text="Secondary text">Three</option> <option value="4" data-mdb-secondary-text="Secondary text">Four</option> <option value="5" data-mdb-secondary-text="Secondary text">Five</option> </select> <!-- MDB JS--> <script type="text/javascript" src="https://motustrength.it/MDB5-Pro/js/mdb.min.js"></script>