Materialize - dropdown不起作用
Materialize - dropdown不起作用
提问于 2015-11-08 08:43:50
我正在使用materialize框架进行ui设计。如果你看我的code，下拉列表没有显示。请帮帮忙。
<div class="input-field col s3">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>回答 4
Stack Overflow用户
发布于 2015-11-09 13:01:28
您必须在JavaScript中初始化select。将以下代码放在结束body标记之前，它应该可以很好地工作。
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>Stack Overflow用户
发布于 2015-11-09 21:24:56
首先，您必须在html中的文件materialize.js之前包含文件jquery，然后必须初始化select元素。此外，对于页面生成的任何动态生成的选择元素，您都需要一个单独的调用。修改您的代码，请参阅：Select Materialize
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>Stack Overflow用户
发布于 2015-11-21 17:07:28
我已经在一个html文件中添加了materialize select的完整代码。我已经在body的底部添加了JavaScript代码，这应该是你不能工作代码的问题。在创建单独的files时，应该将JavaScript和css文件的路径添加到html代码相关的顺序中。
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="row">
<!-- your code start -->
<div class="input-field col s11 m11 l11">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>
<!-- your code end -->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
将外部库或文件添加到html文件时，顺序很重要。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33589501
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号