无法 select materializecss 中的选项 select
Unable to select options in materializecss select
我在 materializecss 的 select 元素中遇到问题。
在我的玉档里
//Stylesheets
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css' )
//Vendor Scripts
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js')
在我的控制器中,我将组件初始化为
$('select').material_select();
在我的 HTML 中,我使用的是
<label>Materialize Select</label>
<select>
<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>
然而,当我尝试 select 选项时,没有任何反应。
下面是初始化后的显示
生成的 HTMl 如下所示
<div class="col s4 input-field">
<div class="select-wrapper">
<span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-b9fd5517-0d0d-40ff-ab29-d37fc9a8d05f" value="Choose your option">
<select class="initialized">
<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>
</div>
</div>
如您所见,未生成 ul 元素,它是在初始化后生成的。
这里有什么问题的线索。
你的javascript是不是这个样子..
$(function() {
$('select').material_select();
});
..你的HTML喜欢这样吗?
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
0.97.2 版本存在一些问题
见下文
我在 materializecss 的 select 元素中遇到问题。
在我的玉档里
//Stylesheets
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css' )
//Vendor Scripts
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js')
在我的控制器中,我将组件初始化为
$('select').material_select();
在我的 HTML 中,我使用的是
<label>Materialize Select</label>
<select>
<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>
然而,当我尝试 select 选项时,没有任何反应。
下面是初始化后的显示
HTMl 如下所示
<div class="col s4 input-field">
<div class="select-wrapper">
<span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-b9fd5517-0d0d-40ff-ab29-d37fc9a8d05f" value="Choose your option">
<select class="initialized">
<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>
</div>
</div>
如您所见,未生成 ul 元素,它是在初始化后生成的。
这里有什么问题的线索。
你的javascript是不是这个样子..
$(function() {
$('select').material_select();
});
..你的HTML喜欢这样吗?
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
0.97.2 版本存在一些问题
见下文