MDB 多选未正确显示答案

【问题标题】：MDB Multiselect not displaying properlyMDB 多选未正确显示
【发布时间】：2021-03-22 02:37:46
【问题描述】：

我最近购买了 99 美元的 MDB 包，其中包括高级多选菜单，但在安装文件后，我仍然获得默认设置。这是我运行代码时的样子，但它应该看起来像 https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example。有谁知道如何解决这个问题。

这是我的代码：

    <!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>

【问题讨论】：

你能从检查元素插入控制台截图吗？我认为你所包含的脚本来自这个插件的免费版本。您需要专业版的文件
@temo 我下载了 pro 文件并将它们拖到正确的 css 文件中。控制台中也没有任何内容。
您是否正确安装了所有 CSS？你的页面读 css/mdb.min.css 这么好吗？
是的，它可以很好地阅读。
能否将 pro css 和 js 文件与基本文件进行比较？你必须确保它们是不同的。

标签： javascript html jquery css mdbootstrap

【解决方案1】：

在您的脚本标签中添加以下内容：

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

这个组件需要通过javascript初始化。

干杯

【讨论】：

我尝试了你的建议，但看起来还是一样，如果你想再看一下，我确实更新了我上面的代码。