实现material_select不是函数错误答案

【问题标题】：Materialize material_select is not a function error实现material_select不是函数错误
【发布时间】：2018-04-29 15:04:12
【问题描述】：

这是我第一次在这里提问，因为我无法找到我的问题的答案。我正在使用materialize并尝试使用material_select()。这是我的主页，其中包含 jQuery 和 materialize 库以及 document.ready 对 sidenav() 和 material_select() 的调用。 Sidenav 工作得很好，但 material_select() 正在抛出 Uncaught TypeError。

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
$(document).ready(() => {
    $("#slide-out").sidenav();
    $("select").material_select();
});
</script>

这是我使用 select 的 html：

<div class="row">
    <div class="input-field">
        <select name="status" id="selectedTest">
            <option value="public" selected>Public</option>
            <option value="private">Private</option>
            <option value="unpublished">Unpublished</option>
        </select>
        <label for="status">Status</label>
    </div>
</div>

这是我得到的错误：

未捕获的类型错误：$(...).material_select 不是函数
在 HTMLDocument.$.ready (dashboard:80)
在可能抛出 (jquery-3.2.1.js:3583)
在进程（jquery-3.2.1.js:3651）

【问题讨论】：

标签： javascript jquery html css materialize

【解决方案1】：

它应该是formSelect() 而不是material_select()，因为你使用的是1.0.0，如果根据Docs 我没有错的话

$(document).ready(function() {
  $("#slide-out").sidenav();
  $("#selectedTest").formSelect();
});

Here is the html where I use select:

<div class="row">
  <div class="input-field">
    <select name="status" id="selectedTest">
      <option value="public" selected>Public</option>
      <option value="private">Private</option>
      <option value="unpublished">Unpublished</option>
    </select>
    <label for="status">Status</label>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

【讨论】：

谢谢。我一定一直在看旧文档。这让我难过了很久。
它发生了，很高兴我能帮助你@KaneJM

【解决方案2】：

试试看和我一起工作我使用materialize 1.0.0-beta

document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('select');
   var options = document.querySelectorAll('option');
   var instances = M.FormSelect.init(elems, options); })

【讨论】：

【解决方案3】：

在脚本部分使用以下内容

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

【讨论】：

Uncaught TypeError: $(...).materialSelect is not a function