Materialise material_select не является ошибкой функции - PullRequest
Новая
       5

Materialise material_select не является ошибкой функции

0 голосов
/ 29 апреля 2018

Я впервые задаю здесь вопрос, так как не смог найти ответ на свой вопрос. Я использую materialize и пытаюсь использовать material_select (). Вот моя главная страница, на которой есть библиотека jQuery и materialize, а также 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>

Вот HTML-код, в котором я использую 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>

Это ошибка, которую я получаю:

Uncaught TypeError: $ (...). Material_select не является функцией
на HTMLDocument. $. готов (панель: 80)
at mightThrow (jquery-3.2.1.js: 3583)
в процессе (jquery-3.2.1.js: 3651)

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

попробуй работает со мной Я использую материализовать 1.0.0-бета 

document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('select');
   var options = document.querySelectorAll('option');
   var instances = M.FormSelect.init(elems, options); })
0 голосов
/ 29 апреля 2018

это должно быть formSelect(), а не material_select(), как вы используете 1.0.0, если я не ошибаюсь согласно Docs

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