虽然在这个帖子中已经提出了这个问题:
Materialize CSS - Select Doesn't Seem to Render
我在放置此代码的位置时遇到问题:
$(document).ready(function() {
$('select').material_select();
});
目前,我能想到的最合乎逻辑的事情就是这样:
<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">
$(document).ready(function() {
$('select').material_select();
});
</script>
<div class="input-field col s12">
<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>
<label>Materialize Select</label>
</div>
</body>
我已经尝试更改&#34;文档&#34;到我的文档的名称,在这种情况下&#34;索引&#34;,但它仍然无法正常工作。
我只是慢了吗?
提前致谢。
答案 0 :(得分:8)
试试这个:
<body>
<div class="input-field col s12">
<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>
<label>Materialize Select</label>
</div>
<!--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>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
答案 1 :(得分:2)
你需要使用一个类&#34;浏览器默认&#34;显示选择组合。像这样:
<select name="name" class="browser-default"><option>- options -</option></select>
&#13;
答案 2 :(得分:0)
您需要初始化select元素,如下所示: https://materializecss.com/select.html#initialization
$(document).ready(function(){
$('select').formSelect();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<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>
答案 3 :(得分:0)
我在2019年遇到了同样的问题,这些答案有所帮助,但是Materialize版本的一些更新原因已升级 M的选择和形式优于浏览器默认设置:)
现在初始化代码已更改为
$(document).ready(function(){
$('select').formSelect();
});