Error: $(…).material_select is not a function (materialize.css)

Question

I want to use materializecss "select" but i am stil getting this errors and my select wont show.

jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).material_select is not a function TypeError: $(...).material_select is not a function
    at HTMLDocument.<anonymous> (http://127.0.0.1:5500/js/index.js:35:15)
    at l (https://code.jquery.com/jquery-3.3.1.min.js:2:29375)
    at c (https://code.jquery.com/jquery-3.3.1.min.js:2:29677) undefined

AND

Uncaught TypeError: $(...).material_select is not a function
    at HTMLDocument.<anonymous> (index.js:35)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

I found only problems with bad used jquery and materialze but my is configured correctly.

<!-- Js -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script src="js/materialize-pagination.js"></script>
    <script src="js/index.js"></script>

// THIS SCRIPT IS INSIDE INDEX.JS
$(document).ready(function() {
  $("select").material_select();
});

*

And my html

<div class="cms_user_input_wrapper">
                <div class="input-field">
                    <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>Status</label>
                </div>
                <div class="input-field">
                    <input placeholder="Placeholder" id="first_name" type="text" class="validate" value="01.06.2018 - 9:00" disabled>
                    <label for="first_name">Posledné prihlásenie</label>
                </div>
            </div>

I have no idea whats wrong.

Answer 1

You can try it:

 <select id="selectValue">
         <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>

<script>
 $(document).ready(function() {
    $('#selectValue').on('change',function(){
      var data = $("#selectValue").find(":selected").val();

     console.log(data);
    });

 });
</script>