Select not appearing in materialize

Question

Select not appearing in materialize

Navigation

#1 by (2 votes)

1

I'm trying to do a project here using Materialize, but the select field is not appearing.

This is HTML

<div class="input-field col s4">
    <select>
      <option value="" disabled selected>Escolha uma opção</option>
      <option value="1">Código</option>
      <option value="2">Nome</option>
      <option value="3">Email</option>
    </select>
    <label for="search">Filtrar</label>
  </div>

This is JavaScript:

$(document).ready(function() {

$('select').formSelect();});

It's like this in View

WhoeverwantstoknowmoreaboutMaterializedocumentation: link

This is the console error

css

asked by anonymous 28.05.2018 / 15:04

1 answer

PHP page within a DIV after submitting How to display accents in python?

score 2 · Accepted Answer

Your problem is that you are using a version of Materialize, but you are using script of another version. Recently Mateiralize suffered a version update by moving from 0.100.2 to 1.0.0-rc-1 Documentation link of that version link

For aversion 0.100.2 use this way:

$(document).ready(function () {
    $('select').material_select();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="input-field col s4">
        <select>
            <option value="" disabled selected>Escolha uma opção</option>
            <option value="1">Código</option>
            <option value="2">Nome</option>
            <option value="3">Email</option>
        </select>
        <label for="search">Filtrar</label>
    </div>
</div>

For aversion 1.0.0-rc-1 use this way:

$(document).ready(function(){
    $('select').formSelect();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<div class="row">
    <div class="input-field col s4">
        <select>
            <option value="" disabled selected>Escolha uma opção</option>
            <option value="1">Código</option>
            <option value="2">Nome</option>
            <option value="3">Email</option>
        </select>
        <label for="search">Filtrar</label>
    </div>
</div>