Materialize CSS选择器无法使用，伴随着JS错误。

Question

我有一个使用Materialize css框架的选择表单问题。这是我的表单：

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

这是我在slim中的布局：

这里是您想要翻译的内容。

doctype html
html
  head
    meta content=("text/html; charset=UTF-8") http-equiv="Content-Type" /
    title Budeprace
    = stylesheet_link_tag    'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css', media: 'screen,projection'
    = stylesheet_link_tag    'http://fonts.googleapis.com/icon?family=Material+Icons'
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
    meta content="width=device-width, initial-scale=1.0" name="viewport"

  body
    .container
      - flash.each do |key, value|
        div class=("text-center #{flash_class(key)}") 
          = value

      = yield

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

如果我从布局中删除这两个.js脚本，SELECT就可以正常工作。如果我将这两个脚本从表单中删除，但在布局中保留它们，那么浏览器会出现以下错误，SELECT将无法正常工作：

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

即使我按照以下方式将其放入application.js中，错误仍然存在：

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

有什么想法出了问题吗？我在使用materialize时遇到了许多选择和下拉列表的问题，但是无法解决。

谢谢。

- Petr

---

请发布您生成的HTML代码，而不是精简的代码。 - Blazemonger

你可以尝试使用 $(document).ready()。 - Draco18s no longer trusts SE

在 jsfiddle 中運作良好。 - Blazemonger

Answer 1

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插件。请交换这两行的顺序。

- Blazemonger

---

没问题！别忘了接受你喜欢的答案来鼓励其他人在未来帮助你。 - Blazemonger

运行得非常好。CDN的顺序确实是我的问题。感谢Blazemonger。 - Prahlad

Answer 2

也许问题是由于版本过时引起的。我使用

=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();
});

所以它有效

- kolserdav

---

在我的情况下，同样的：1.0.0-beta版本在这一点上似乎有问题:( - Roman Matveev

Answer 3

新的jQuery下拉菜单初始化方法是使用标签。 $(document).ready(function(){ $('select').formSelect(); });

- Peter Cr

---

感谢您的输入，但问题在于jQuery在Materialize库之后加载，而该库依赖于jQuery。 - Petr

感谢。这适用于最新版本的jquery 3.3.1和Materialize 1.0.0-rc.2。 - Mir Adnan