MDB Multiselect not displaying properly

1.8k Views Asked by At

enter image description hereDemo

I recently bought the $99 MDB package that includes the premium multiselect menu but after installing the files I still get the default. This is what it looks like when I run my code, but it should look like this https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example. Does anyone know how to fix this from happening.

Here is my code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>Material Design for Bootstrap</title>
      <!-- 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.11.2/css/all.css">
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" href="css/mdb.min.css">
      <!-- Your custom styles (optional) -->
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <select class="mdb-select md-form" multiple>
      <option value="" disabled selected>Choose your country</option>
      <option value="1">USA</option>
      <option value="2">Germany</option>
      <option value="3">France</option>
      <option value="3">Poland</option>
      <option value="3">Japan</option>
    </select>
    
      <!-- jQuery -->
      <script type="text/javascript" src="js/jquery.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>
      <!-- Your custom scripts (optional) -->
       <script type="text/javascript">
      $(document).ready(function() {
          $('.mdb-select').materialSelect();
      });
  </script>
    </body>
    </html>
1

There are 1 best solutions below

1
On

In your script tag add following:

$(document).ready(function() {
  $('.mdb-select').materialSelect();
});

This component needs initialization via javascript.

Cheers