实现CSS – select不会呈现
我目前正在物化CSS，似乎我已经与选定的领域挂钩。
我正在使用从他们的网站提供的例子，但不幸的是它在任何视图中呈现。 我想知道如果别人能够帮助。
我正在尝试做的是创build一个提供填充的2个末端间隔符的行 – 然后在内部的两个行内应该有一个search文本input和一个searchselect下拉列表。
这是我工作的例子： http : //materializecss.com/forms.html
先谢谢你。
这是代码片段。
<div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s2"></div> <div class="input-field col s5"> <input id="icon_prefix" type="text" class="validate" /> <label for="icon_prefix">Search</label> </div> <div class="input-field col s3"> <label>Materialize Select</label> <select> <option value="" disabled="disabled" selected="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="input-field col s2"></div> </div> </form>
由于它们覆盖了浏览器的默认设置，因此select样式需要使用Javascript才能运行。 你需要包含Materialise Javascript文件，然后调用
$(document).ready(function() { $('select').material_select(); });
你已经加载该文件后。
实现CSS中的selectfunction的devise，在我看来，是一个不使用它的很好的理由。
您必须使用material_select()初始化select元素，如@ littleguy23所述。 如果你不这样做，select框甚至不显示！ 在一个老式的jQuery应用程序中，我可以在文档就绪函数中初始化它。 猜猜看，现在我和其他人都没有使用jQuery，也没有在文档就绪钩子中初始化我们的应用程序。
dynamic创buildselect 。 如果我正在dynamic创buildselect项，比如发生在像Ember这样的框架中，这会在运行中生成视图呢？ 我必须在每个视图中添加逻辑来在每次生成视图时初始化select框，或者写一个视图混合来为我处理。 而且更糟的是：当生成视图时，在Ember中调用didInsertElement ，对select框的选项列表的绑定可能还没有被parsing，所以我需要特殊的逻辑观察选项列表，直到等待在调用material_select之前填充它。 如果这些选项发生变化，那么material_select就不会有任何想法，并且不会更新下拉菜单。 当选项改变时，我可以再次调用material_select ，但是看起来它什么都不做（被忽略）。
换句话说，实现CSS的select框背后的devise假设是它们在页面加载时都在那里，并且它们的值永不改变。
执行 。 从美学的angular度来看，我也不赞成实现CSS实现其下拉的方式，即在DOM中的其他地方创build一个平行的，阴影的元素集。 当然，像select2这样的替代品也可以做同样的事情，而且可能没有其他办法来实现一些视觉效果（真的？）。 对我来说，当我检查一个元素时，我希望看到这个元素，而不是某个神奇创build的其他地方的某个影子版本。
当Ember把视图撕下来的时候，我不确定物化CSS会把它创build的阴影元素撕下来。 其实，如果是这样，我会感到很惊讶。 如果我的理论是正确的，那么随着视图的产生和被拆除，你的DOM最终会被几十个没有任何连接的影子下拉组件所污染。 这不仅适用于Ember，也适用于任何其他基于MVC /模板的OPA前端框架。
绑定 。 我也一直无法弄清楚如何让对话框中选定的值绑定回类似于Ember这样的框架，通过{{view 'Ember.Select' value=country}}types调用select框接口。 换句话说，当select某个东西时， country不会更新。 这是一个交易断路器。
波浪 。 顺便说一下，同样的问题适用于button上的“波浪”效果。 每次创buildbutton时都必须初始化它。 我个人并不关心波浪效应，也不明白什么是大惊小怪，但是如果你真的想要波浪，那么请注意，你将会花掉你生活中很大一部分时间，担心如何初始化每个button创build时。
我很欣赏CSS家伙所做的努力，并且在那里有一些很棒的视觉效果，但是它太大了，像上面这样的东西太多了，我会用。 我现在计划从应用程序中挖掘实现CSS，然后返回到Bootstrap或Suit CSS顶层。 你的工具应该让你的生活更轻松，不难。
@ littleguy23这是正确的，但你不想做到多选。 所以只需对代码进行一些小改动：
$(document).ready(function() { // Select - Single $('select:not([multiple])').material_select(); });
对我而言，解决scheme是在选项数据加载完成后调用“material_select”函数。 如果您将OptionsList.find（）。count（）的值打印到控制台，它将首先显示0，然后在几毫秒之后，该列表将填充数据。
Template.[name].rendered = function() { this.autorun(function() { var optionsCursor = OptionsList.find().count(); if(optionsCursor > 0){ $('select').material_select(); } });
};
如果你使用Angularjs，你可以使用angular-materialize插件 ，它提供了一些方便的指令。 那么你不需要在js中初始化，只需添加material-select到你的select：
<div input-field> <select class="" ng-model="select.value1" material-select> <option ng-repeat="value in select.choices">{{value}}</option> </select> </div>
对于我来说，其他的答案都没有，因为我使用的是最新版本的MaterializeCSS和Meteor，而且jquery版本之间有不兼容性，Meteor 1.1.10使用jquery 1.11（重写这个依赖并不容易，很可能会破坏Meteor / Blaze）并testingMaterialise与jQuery的2.2工作正常。 有关更多信息，请参阅https://stackoverflow.com/a/34809976/2882279 。
这是一个已知的问题，下拉和select实现0.97.2和0.97.3; 欲了解更多信息，请参阅https://github.com/Dogfalo/materialize/issues/2265和https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 。
我在meteor中使用了MaterializeCSS的Sass版本，并在我的meteor包文件中使用了诗意：materialize-scss@1.97.1来强制旧版本。 现在的下拉菜单，老jquery和所有！
只有在html呈现后才调用物化CSS jQuery代码。 所以你可以有一个控制器，然后触发一个服务，调用控制器中的jQuery代码。 这将使selectbutton正常。 如果你尝试使用ngChange或者ngSubmit，它可能无法工作，因为select标签的dynamic样式。
这也起作用：class =“browser-default”
只是为了跟上这一点，因为最好的答案build议不使用materializecss …在当前版本的物化你不再需要初始化select。
