我使用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"
即使我将以这种方式将它放到application.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本身之前加载了Materialise插件.切换这两行的顺序.