Javascript 具体化css选择不处理JS错误

我对使用MaterializeCSS框架选择表单有一个问题。这是我的表格：

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

<script src="//code.jquery.com/jquery-2.1.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<script>
    $('select').material_select();
</script>

如果我从布局中删除这两个.js脚本，那么SELECT会起作用。如果我将从表单中删除这两个脚本并将它们保留在布局中，则“选择”将不再工作，浏览器中出现以下错误：

"job:65 Uncaught TypeError: $(...).material_select is not a function"

即使我这样将其放入application.js，错误仍然存在：

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

你知道怎么了吗？我在materialize上遇到了很多选择和下拉问题，但我无法解决

---

谢谢。

Materialize是使用jQuery构建的。在代码的这一部分中：

  = javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'
  = javascript_include_tag 'http://code.jquery.com/jquery-2.1.2.min.js'

---

在加载jQuery本身之前，先加载Materialize插件。切换这两行的顺序。

问题可能是由于版本过时造成的。我用

=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
=https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js

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

---

因此它可以工作

较新的jQuery初始化选择下拉列表的方法是

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

---

请发布生成的HTML而不是slim代码。您可以尝试使用

$（document）.ready（）

没问题！不要忘记回答您的问题，以鼓励其他人在将来帮助您。在我的情况下，相同的：1.0.0-beta版在这一点上有缺陷：（感谢您的输入，但问题是jquery是在Materialize库之后加载的，库依赖于jQueryTank。这适用于最新版本的jquery 3.3.1和Materialize 1.0.0-rc。2

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