Javascript materialize css select无法正常工作

我试图在MaterializeCSS中使用选择字段。但它似乎不能正常工作 我的代码：

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

操作系统版本
选择你的选择
选择1
选择2
选择3
$（文档）.ready（函数（）{
$（'select'）。材料选择（）；
});

在这种情况下，它渲染的是一个选择字段，但标签仍然与选择字段重叠。如图所示：

从我检查过的地方，我发现：

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

▼

选择您的选项
选项1
选项2
选项3

选择你的选择
选择1
选择2
选择3

从我的代码中，我从inspect获得以下信息：

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

选择你的选择
选择你的选择
选择1
选择2
选择3

缺少的UL元素呈现在所有div下方，这意味着在我的页脚上方。。我错在哪里

---

Fiddle:

我更新了您的JSFIDLE，因为它在jQuery之前加载Materialize，所以未定义$（）

以下是链接：

这是正常工作，就像在他们的网站

但是，看看您在问题中发布的代码和JSFIDLE中的代码，

---

在我更新的JSFIDLE中，我放置了另一个选择来说明不同

位置之间的差异。只要确保它是在我修复了select下拉列表的问题之后

请查看演示。

您的演示：

$（文档）.ready（函数（）{
$（'select'）。材料选择（）；
});

选择你的选择
选择1
选择2
选择3
您可以使用以下代码：

<div class="input-field col s12 m6">
    <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>
    <label>Materialize Select</label>
</div>

还有ta chan！，它可以工作。
我也遇到了这个问题，因为我的视图是从javascript代码自动生成的。我通过从setTimeout调用select（）函数解决了这个问题，在生成select DOM的代码之后，它就开始工作了


setTimeout（function（）{$（'select'）。material_select（）；}，1000）将标签放在选择标记之后。它应该会起作用
 如果可能的话，分享你的代码。查看我的编辑@SayedRafeeq@-Vicky，谢谢。我也有标签问题。问题是当它初始化时，它不是活动的。只需在元素完成渲染后将
active
类添加到元素中即可。应该可以。但是我不想要
浏览器默认值
下拉@Sayed Rafeeq。我只想像问题中提到的那样下拉。请再次阅读问题选中这个@Sayed Rafeeq我想要这样的东西@Vicky如果你想用我的例子作为参考，不妨接受它作为答案。或者有什么我没有涵盖的吗？@fjsuarez我正在寻找相同的，但正如问题中提到的，我的代码中缺少呈现的标记。。。但在共享的JSFIDLE中，您拥有它。这是我一开始的怀疑。但我明白了。我丢失了一个，这也是我的问题的另一个原因。我不可能认为在Materialize之前加载jQuery是重要的#索诺比
(function($){
  $(function(){
    $(document).ready(function() {
        $('select').material_select();
      });
  });
})(jQuery);