Materialize material_select is not a function error

Question

This is my first time asking a question on here as I was unable to find an answer to my issue. I am using materialize and trying to use material_select(). Here is my main page that has the jQuery and materialize library as well as document.ready calls to both sidenav() and material_select() . Sidenav works just fine, yet material_select() is throwing an Uncaught TypeError.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
$(document).ready(() => {
    $("#slide-out").sidenav();
    $("select").material_select();
});
</script>

Here is the html where I use select:

<div class="row">
    <div class="input-field">
        <select name="status" id="selectedTest">
            <option value="public" selected>Public</option>
            <option value="private">Private</option>
            <option value="unpublished">Unpublished</option>
        </select>
        <label for="status">Status</label>
    </div>
</div>

This is the error I am getting:

Uncaught TypeError: $(...).material_select is not a function
at HTMLDocument.$.ready (dashboard:80)
at mightThrow (jquery-3.2.1.js:3583)
at process (jquery-3.2.1.js:3651)

Answer 1

it should be formSelect() rather than material_select() as you are using 1.0.0 if i am not wrong according to Docs

 $(document).ready(function() { $("#slide-out").sidenav(); $("#selectedTest").formSelect(); });

 Here is the html where I use select: <div class="row"> <div class="input-field"> <select name="status" id="selectedTest"> <option value="public" selected>Public</option> <option value="private">Private</option> <option value="unpublished">Unpublished</option> </select> <label for="status">Status</label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

Answer 2

try it works with me I use materialize 1.0.0-beta

document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('select');
   var options = document.querySelectorAll('option');
   var instances = M.FormSelect.init(elems, options); })

Answer 3

Use the following in your script part

$(document).ready(function() {
$('.mdb-select').materialSelect();
});