materialize css select无法正常工作

Question

我想在materialize css中使用select字段.但它似乎不能正常 我的代码:

<div class="container">  
  <div class="row">

    <div class="input-field s6">
      <label >OS Version</label>
      <select class="validate">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>

    </div>
  </div>
</div>

    <!--  Scripts-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/init.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('select').material_select();
    });

    </script>

在此,它渲染一个选择字段,但标签仍然与选择字段重叠.如图所示:

来自http://materializecss.com/forms.html我已经检查了我在哪里:

<div class="select-wrapper">
  <span class="caret">?</span>
  <input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
  <ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
    <li class="disabled"><span>Choose your option</span></li>
    <li class=""><span>Option 1</span></li>
    <li class=""><span>Option 2</span></li>
    <li class=""><span>Option 3</span></li>
  </ul>
  <select class="initialized">
    <option value="" disabled="" selected="">Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

从我的代码我得到检查:

<div class="select-wrapper">
  <span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
  <select class="validate initialized">
    <option value="" disabled="" selected="">Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

缺少UL元素正在渲染所有div,这意味着在我的页脚之上..我哪里出错了？

小提琴:https://jsfiddle.net/007zkvut/

Answer 1

我更新了你的jsfiddle因为它在jQuery之前加载了Materialize,所以没有定义$().

链接在这里:

https://jsfiddle.net/007zkvut/7/

它工作正常,就像在他们的网站上一样.

但是,查看您在问题中发布的代码和jsfiddle中的代码,其位置存在差异 <label>

在我更新的jsfiddle中,我放了另一个选择来说明不同<label>位置之间的区别.只要确保它是在追求<select>