I'm trying to upload the package a bit like installing via CDN, but I'm a fan and don't have a lot of knowledge on this. On the site there is the tutorial on how to install the package via NPM, but I have no idea what it is or how it works. I am looking for an easier solution, but I am not understanding how to load the MDB 5 Pro library.
What I did now was this:
What am I doing wrong ?
Fiddle: 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();
});
You need to import jQuery before MDB and other scripts. So, add this to your HTML code.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
The final code looks like this.
<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>
I did it myself. I realized that the Html code must be inserted before MDB Js. Also, I was using the wrong class for select, I was confused, I was using MDB 4's select class.
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>