实现 css 选择无法正常工作

Question

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

<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>之后即可

Answer 2

我已经修复了选择下拉菜单的问题。

请查看演示。 https://jsfiddle.net/007zkvut/9/

您的演示： https://jsfiddle.net/007zkvut/8/

$(document).ready(function() {
 	$('select').material_select();
});

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">  
  <div class="row">
    <div class="input-field s6">      
      <select class="browser-default waves-effect waves-light btn">
          <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>

Answer 3

我也遇到了这个问题，因为我的视图是从 javascript 代码自动生成的。我通过从 setTimeout 调用 select() 函数并在生成选择 DOM 的代码之后解决了这个问题。

setTimeout(function(){$('select').material_select();},1000);

同样的技巧也适用于具体化日期选择器。做吧。

setTimeout(function(){$('.datepicker').pickadate();},2000)

Answer 4

你可以使用下面的代码：

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

并且，在您的 javascript 文件中，您需要输入下一个代码：

(function($){
  $(function(){
    $(document).ready(function() {
        $('select').material_select();
      });
  });
})(jQuery);

和ta chan！，它有效。

Answer 5

将标签放在选择标签之后。它应该可以解决问题。