>

이 문제에 대한 답변을 찾을 수 없기 때문에 여기에 질문을 한 것은 이번이 처음입니다. materialize를 사용하고 material_select ()를 사용하려고합니다. 다음은 jQuery 및 materialize 라이브러리와 document.ready 가있는 메인 페이지입니다.  두 sidenav() 에 전화  그리고 material_select() . Sidenav는 잘 작동하지만 material_select()  잡히지 않은 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>

다음은 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>

이 오류는 다음과 같습니다.

와이즈 비즈

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)


  • 답변 # 1

    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>
    
    

  • 답변 # 2

    해보십시오 나와 함께 작동 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); })
    
    

관련 자료

  • 이전 segment - 알 수없는 이유로 nil을 반환하는 current_user ip를 레일
  • 다음 autohotkey Comparison of two volumes - 오토 핫키 - 두 볼륨의 비교 :결과 오류