2

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(function() {
    $('select').material_select();
});

At the moment, the most logical thing I can think of is to place it like so:

<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>

I've tried changing the "document" to the name of my document, in this case "index", but it still doesn't work.

Am I just being slow?

Thanks in advance.

Community
  • 1
  • 1
Constantly Confused
  • 595
  • 4
  • 10
  • 24

5 Answers5

9

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>
arnoudhgz
  • 1,284
  • 9
  • 17
5

You need use a class "browser-default" to show the select combo. Like this:

<select name="name" class="browser-default"><option>- options -</option></select>
Rene Weiss
  • 51
  • 1
  • 1
2

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

Robin Jiao
  • 113
  • 10
0

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 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>
Ray
  • 1,539
  • 1
  • 14
  • 27
0

this work for me. The main change is the version, not use 1.0.0. then use 0.97.2

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<script>
    $(document).ready(function() {
      $('select').material_select();
    });
</script>
<?!= include("Planificacion-js");?>  
</body>
Jose Miguel Mota Macias
  • 1
  • 1