Topic: Material select does not work
Start your code here<!-- Form --> <form class="text-center" style="color: #757575;"> <!-- Name --> <div class="md-form mt-3"> <input type="text" id="materialContactFormName" class="form-control"> <label for="materialContactFormName">Name</label> </div> <!-- E-mail --> <div class="md-form"> <input type="email" id="materialContactFormEmail" class="form-control"> <label for="materialContactFormEmail">E-mail</label> </div> <!-- Subject --> <div class="md-form"> <span>This select does not</span> <select class="mdb-select"> <option value="" disabled>Choose option</option> <option value="1" selected>Feedback</option> <option value="2">Report a bug</option> <option value="3">Feature request</option> <option value="4">Feature request</option> </select> </div> <!--Message--> <div class="md-form"> <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea> <label for="materialContactFormMessage">Message</label> </div> <!-- Copy --> <div class="form-check"> <input type="checkbox" class="form-check-input" id="materialContactFormCopy"> <label class="form-check-label" for="materialContactFormCopy">Send me a copy of this message</label> </div> <!-- Send button --> <button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button> </form> <!-- Form --> .... <!-- SCRIPTS --> <script> // Material Select Initialization $(document).ready(function() { $('.mdb-select').materialSelect(); }); </script> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script>
Piotr Glejzer staff commented 6 years ago
You need initiate materialSelect(); script below all main scripts like jquery/popper/bootstrap/mdb.min.js . The browser reads the page code from top to bottom, if you are doing like that the code dosen't work becasue it wants work but the jquery and mdb.min.js is not loaded yet so it code dosen't have opporunity to start working.
<!– SCRIPTS –>
<!– JQuery –>
<script type=”text/javascript” src=”js/jquery-3.3.1.min.js”></script>
<!– Bootstrap tooltips –>
<script type=”text/javascript” src=”js/popper.min.js”></script>
<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<!– MDB core JavaScript –>
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script>
// Material Select Initialization
$(document).ready(function() {
$(‘.mdb-select’).materialSelect();
});
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 6 years ago
Hi diangh, may you show me your code? Because It might make it simpler. Best, Piotrdiangh pro commented 6 years ago
My mistake - I meant js/modules/...