Question

我正在使用物化框架进行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>

Answer 1

您必须初始化JavaScript中的select。在关闭body标签之前，请输入以下代码，它应该可以正常工作。

<script>
    $(document).ready(function() {
      $('select').material_select();
    });
</script>

Answer 2

首先，必须在文件materialize.js之前的html中包含文件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>

Answer 3

我在一个html文件中添加了实现选择的完整代码。我添加了JavaScript代码底部body，这对于不使用代码应该是您的问题。当您创建单独的苍蝇时，您应该在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文件时，订单很重要。

Answer 4

您必须确保使用jquery或JS初始化select。将此行复制粘贴到文档中的代码中：

$('select').material_select();

物化 - 下拉不起作用

4 个答案: