$（...）。formSelect不是函数

Question

[enter image description hereenter image description hereAm使用针对表单的materializecss插件。它在html页面中工作正常，但是当我在.Net核心MVC视图中使用时，选择选项下拉列表不起作用。它在控制台中显示错误。[enter image description here

'代码'

<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

我在.NET Core MVC视图页面中使用Materialize plugins进行了测试，该测试对我而言效果很好，请参考它。

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

您可以创建一个新的视图页面，并像我在上面的示例中所做的那样包含来自CDN的实现，然后测试它是否可以在您的项目中正常工作。此外，要检查是否与其他jquery文件（在布局文件中引用）有任何冲突导致此问题，请将Layout = null;设置为视图页面不使用任何布局。