具体化 css 选择不适用于 JS 错误

Materialize css select not working with JS errors

本文关键字：JS 错误 适用于 不适用 css 选择 具体化      更新时间：2023-09-26

我在使用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>

这是我的苗条布局：

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"

即使我将错误放入应用程序.js错误仍然存在这样：

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

知道出了什么问题吗？我遇到了许多选择和下拉问题，但无法弄清楚。

谢谢。

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();
});
相关文章：