物化 CSS 选择语句未显示答案

【问题标题】：Materialize CSS select statement not showing物化 CSS 选择语句未显示
【发布时间】：2019-03-25 18:00:30
【问题描述】：

虽然这个问题已经在这个帖子中提出过：

Materialize CSS - Select Doesn't Seem to Render

我在放置这段代码时遇到了问题：

$(document).ready(function() {
    $('select').material_select();
});

目前，我能想到的最合乎逻辑的事情就是这样放置：

<body>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js">
    $(document).ready(function() {
        $('select').material_select();
    });
  </script>

  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>
</body>

我尝试将“文档”更改为我的文档的名称，在本例中为“索引”，但它仍然不起作用。

我只是慢了吗？

提前致谢。

【问题讨论】：

标签： html css materialize

【解决方案1】：

试试这个：

<body>
  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
     $(document).ready(function() {
        $('select').material_select();
    });
  </script>

</body>

【讨论】：

是的，完成了。非常感谢，我觉得应该澄清一下。
谢谢，我遇到了同样的问题。将 jquery 更新到 2.1.1 版本就是答案。更改

【解决方案2】：

您需要使用“浏览器默认”类来显示选择组合。像这样：

&lt;select name="name" class="browser-default"&gt;&lt;option&gt;- options -&lt;/option&gt;&lt;/select&gt;

【讨论】：

【解决方案3】：

我在 2019 年遇到了同样的问题，这些答案有所帮助，但是 Materialize 版本升级的一些更新原因 M 的 select 和 form 比浏览器默认的要好:)

现在初始化代码改为

  $(document).ready(function(){
    $('select').formSelect();
  });

https://materializecss.com/select.html

【讨论】：

【解决方案4】：

您需要初始化选择元素，如下所示： https://materializecss.com/select.html#initialization

$(document).ready(function(){
    $('select').formSelect();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
<div class="input-field col s12">
    <select multiple>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
</div>

【讨论】：