$(...).formSelect 不是函数

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

我在.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; 设置为您的视图页面不使用布局。

$(...).formSelect 不是函数

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

model-view-controller

html-select

materialize

asp.net-core