$(...).formSelect is not a function

Question

enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here

'code'

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>

<script src="~/js/materialize.min.js"></script>

<script>
    $(document).ready(function () {

        $('select').formSelect();

        $('.datepicker').datepicker();

    });

</script>

<div class="container body">

    <div class="col-md-12 col-sm-12  form-group has-feedback">

        <div class="input-field">

            <i class="material-icons prefix">assignment</i>

            <select id="ddlAssignment">

                <option value="" disabled selected>Choose your option</option>

                <option value="1">Carolinas, Main</option>

                <option value="2">Option 2</option>

                <option value="3">Option 3</option>

            </select>

            <label>Assignment</label>

        </div>


    </div>

    <div class="col-md-6 col-sm-6  form-group has-feedback">

        <div class="input-field">

            <i class="material-icons prefix">event_note</i>

            <input type="text" class="datepicker">

            <label class="dated-lbl" for="icon_prefixsd">Service Date</label>

        </div>
    </div>
</div>

Answer 1

I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.

<div class="container body">
    <div class="col-md-12 col-sm-12  form-group has-feedback">

        <div class="input-field">

            <i class="material-icons prefix">assignment</i>

            <select id="ddlAssignment">

                <option value="" disabled selected>Choose your option</option>

                <option value="1">Carolinas, Main</option>

                <option value="2">Option 2</option>

                <option value="3">Option 3</option>

            </select>

            <label>Assignment</label>

        </div>
    </div>

    <div class="col-md-6 col-sm-6  form-group has-feedback">

        <div class="input-field">

            <i class="material-icons prefix">event_note</i>

            <input type="text" class="datepicker">

            <label class="dated-lbl" for="icon_prefixsd">Service Date</label>

        </div>
    </div>
</div>

@section scripts{
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
        $('select').formSelect();

        $('.datepicker').datepicker();
    </script>
}

You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.