Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Materialize

Materialize Css Select Statement Not Showing

Post a Comment
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><divclass="input-field col s12"><select><optionvalue=""disabledselected>Choose your option</option><optionvalue="1">Option 1</option><optionvalue="2">Option 2</option><optionvalue="3">Option 3</option></select><label>Materialize Select</label></div><!--Import jQuery before materialize.js--><scripttype="text/javascript"src="https://code.jquery.com/jquery-2.1.1.min.js"></script><scripttype="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:

<selectname="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();
  });

https://materializecss.com/select.html

Solution 4:

You need to initialise the select element as shown here : https://materializecss.com/select.html#initialization

$(document).ready(function(){
    $('select').formSelect();
  });
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Compiled and minified CSS --><linkhref="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><!-- Compiled and minified JavaScript --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><divclass="input-field col s12"><selectmultiple><optionvalue=""disabledselected>Choose your option</option><optionvalue="1">Option 1</option><optionvalue="2">Option 2</option><optionvalue="3">Option 3</option></select><label>Materialize Multiple Select</label></div>

Post a Comment for "Materialize Css Select Statement Not Showing"