Materialize CSS Select Statement Not Showing
Although this question has already been asked in this thread: Materialize CSS - Select Doesn't Seem to Render I'm having problems with where to place this code: $(document).ready(f
Solution 1:
Try this:
<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>
Solution 2:
You need use a class "browser-default" to show the select combo. Like this:
<select name="name" class="browser-default"><option>- options -</option></select>Solution 3:
i had same problem in 2019, these answers helped, but a little update cause of the Materialize version upgraded M's select and form are better than browser-default one:)
now the initialization code is changed to
$(document).ready(function(){
$('select').formSelect();
});
Solution 4:
You need to initialise the select element as shown here : 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 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>
Post a Comment for "Materialize CSS Select Statement Not Showing"