Constantly Confused Constantly Confused - 4 months ago 21
HTML Question

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

Answer

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