javascript Materialize material_select 不是函数错误

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/50087997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 08:54:59  来源:igfitidea点击:

Materialize material_select is not a function error

javascriptjqueryhtmlcssmaterialize

提问by KaneJM

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.readycalls to both sidenav()and material_select(). Sidenav works just fine, yet material_select()is throwing an Uncaught TypeError.

这是我第一次在这里提问,因为我无法找到问题的答案。我正在使用 materialize 并尝试使用 material_select()。这里是有jQuery和Materialise的图书馆,以及我的主要页面document.ready,以两个呼叫sidenav()material_select()。Sidenav 工作得很好,但material_select()会抛出 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:

这是我使用select的html:

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

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

回答by Muhammad Omer Aslam

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

如果我没有错的话,它应该是formSelect()而不是material_select()你正在使用的1.0.0Docs

$(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>

回答by Artur Todeschini

try it works with me I use materialize 1.0.0-beta

试试看,我用的是 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); })

回答by salafi

Use the following in your script part

在脚本部分使用以下内容

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