无法在materializecss选择中选择选项

时间:2015-12-08 08:52:45

标签: css materialize

我在materializecss的select元素中遇到问题。

在我的玉文件中

//Stylesheets
        link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css' )

//Vendor Scripts
        script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
        script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js')

在我的控制器中,我正在将组件初始化为

$('select').material_select();

在我的HTML中,我正在使用

<label>Materialize Select</label>
<select>
   <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>

然而,当我尝试选择选项时,没有任何事情发生。

以下是初始化后显示的内容

enter image description here

生成的HTMl如下所示

<div class="col s4 input-field">
   <div class="select-wrapper">
      <span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-b9fd5517-0d0d-40ff-ab29-d37fc9a8d05f" value="Choose your option">
      <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>

正如您所看到的,初始化后生成的元素未生成。

任何线索可能会出现问题。

2 个答案:

答案 0 :(得分:1)

0.97.2版本存在一些问题

见下文

https://github.com/Dogfalo/materialize/issues/2265

答案 1 :(得分:0)

你的javascript看起来像这样......

  .source-dnd {
    opacity: 0.2;
  }

  .target-dnd-add {
    border: 1px dotted #aaa;
  }

  .target-dnd-after {
    border-bottom: 1px dotted #aaa;
  }

  .target-dnd-before {
    border-top: 1px dotted #aaa;
  }

..和你的HTML一样?

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