I am using materialize framework for ui design. If you look at my code , the dropdown doesn't show. Please help.
<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>
You must initialize the select in your JavaScript. Put the following code just before closing your bodytag and it should work fine.
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
First you must include file jquery in your html before your file materialize.js, then you must initialize the select element. In addition, you will need a separate call for any dynamically generated select elements your page generates. Modify your code, see: 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>
I have added complete code for materialize select in one html file. I have added JavaScript code bottom of the body which should be your problem for not working the code. When you create separate flies, you should add JavaScript and css files' paths to your html code relevant order.
<!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>When you add external libraries or files to your html file the order is important.
You must be sure that you initialize the select with jquery or JS. Copy paste this line in your code in the document ready:
$('select').material_select();
