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>

从我的代码我得到的是来自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>

缺少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（）函数并在生成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

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

materialize css select无法正常工作

5 个答案: