title: MDB Multiselect not displaying properly
body: <p><a href="https://i.stack.imgur.com/i7M9n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7M9n.png" alt="enter image description here" /></a><a href="https://i.stack.imgur.com/HJZhe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HJZhe.png" alt="Demo" /></a></p>
  <p>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 <a href="https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example" rel="nofollow noreferrer">https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example</a>. Does anyone know how to fix this from happening.</p>
  <p>Here is my code:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
        &lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;&gt;
        &lt;title&gt;Material Design for Bootstrap&lt;/title&gt;
        &lt;!-- MDB icon --&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;img/mdb-favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
        &lt;!-- Font Awesome --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/v5.11.2/css/all.css&quot;&gt;
        &lt;!-- Google Fonts Roboto --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap&quot;&gt;
        &lt;!-- Bootstrap core CSS --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
        &lt;!-- Material Design Bootstrap --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;css/mdb.min.css&quot;&gt;
        &lt;!-- Your custom styles (optional) --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;select class=&quot;mdb-select md-form&quot; multiple&gt;
        &lt;option value=&quot;&quot; disabled selected&gt;Choose your country&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;USA&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;Germany&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;France&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;Poland&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;Japan&lt;/option&gt;
      &lt;/select&gt;
      
        &lt;!-- jQuery --&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;!-- Bootstrap tooltips --&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/popper.min.js&quot;&gt;&lt;/script&gt;
        &lt;!-- Bootstrap core JavaScript --&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
        &lt;!-- MDB core JavaScript --&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/mdb.min.js&quot;&gt;&lt;/script&gt;
        &lt;!-- Your custom scripts (optional) --&gt;
         &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function() {
            $('.mdb-select').materialSelect();
        });
    &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>