Question

我目前正在使用物化CSS，似乎我已经被选择字段所困扰。

我正在使用他们网站提供的示例，但不幸的是，它在视图中呈现了任何内容。我想知道其他人是否能够提供帮助。

我要做的是创建一个带有2个提供填充的端部垫片的行 - 然后在内部的两个行项目中应该有一个搜索文本输入和一个搜索选择下拉列表。

这是我在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>

Answer 1

因为它们会覆盖浏览器默认设置，所以选择样式需要运行Javascript。您需要包含Materialize Javascript文件，然后调用

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

加载该文件后。

Answer 2

在我看来，实现CSS中select功能的设计是不使用它的一个很好的理由。

您必须使用material_select()初始化select元素，如@ littleguy23所述。如果您没有，则甚至不会显示选择框！在一个老式的jQuery应用程序中，我可以在文档就绪函数中初始化它。猜猜是什么，我和其他许多人现在都没有使用jQuery，也没有在文档就绪钩子中初始化我们的应用程序。

动态创建选择。如果我正在创建动态选择，例如在像Ember这样的框架中发生什么，它会动态生成视图？我必须在每个视图中添加逻辑以在每次生成视图时初始化选择框，或者编写视图mixin以便为我处理。并且情况比这更糟糕：当生成视图时，并且在Ember条件didInsertElement被调用时，对选择框的选项列表的绑定可能尚未解决，所以我需要特殊的逻辑观察选项列表，等到它在调用material_select之前填充。如果选项发生变化（{1}}可能很容易发生，并且不会更新下拉列表。当选项发生变化时，我可以再次调用material_select，但似乎没有做任何事情（被忽略）。

换句话说，实现CSS选择框背后的设计假设似乎是它们在页面加载时都存在，并且它们的值永远不会改变。

<强>实施即可。从美学的角度来看，我也不赞成实现CSS实现其下拉的方式，即在DOM中的其他地方创建一个并行的阴影元素集。当然，像select2这样的替代品做同样的事情，并且可能没有其他方法可以实现一些视觉效果（真的吗？）。但是，对我而言，当我检查一个元素时，我想要看到的元素，而不是某个神奇创造的其他地方的阴影版本。

当Ember扯下视图时，我不确定实现CSS是否会撕掉它创建的阴影元素。实际上，如果确实如此，我会感到非常惊讶。如果我的理论是正确的，当视图生成并被拆除时，你的DOM最终会受到几十套没有连接到任何东西的阴影下拉的污染。这不仅适用于Ember，也适用于任何其他基于MVC /模板的OPA前端框架。

<强>绑定即可。我还无法弄清楚如何在对话框中选择值来绑定回Ember等框架中有用的任何东西，它通过material_select类型接口调用选择框。换句话说，当选择某些内容时，{{view 'Ember.Select' value=country}}不会更新。这是一个交易破坏者。

<强>波即可。顺便说一下，同样的问题适用于＆＃34; wave＆＃34;对按钮的影响。每次创建按钮时都必须初始化它。我个人并不关心波浪效应，也不了解所有大惊小怪的事情，但是如果你确实想要波浪，请注意你将花费其余部分的大部分时间。你的生活担心如何在创建每个按钮时初始化它。

我很欣赏CSS实体化所做的努力，并且有一些很好的视觉效果，但它太大了，有太多的问题如上所述是我会用的东西。我现在打算从我的应用程序中删除物化CSS，然后返回到Bootstrap或Suit CSS上的图层。你的工具应该让你的生活更轻松，而不是更难。

Answer 3

@ littleguy23这是正确的，但你不想做多选。所以只需对代码进行一些小改动：

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

Answer 4

对我有用的解决方案是在加载选项数据后调用'material_select'函数。如果将OptionsList.find（）。count（）的值打印到控制台，则它首先为0，然后几毫秒后，列表将填充数据。

Template.[name].rendered = function() {
this.autorun(function() {
    var optionsCursor = OptionsList.find().count();
    if(optionsCursor > 0){
         $('select').material_select();
    }
});

};

Answer 5

如果你正在使用Angularjs，你可以使用angular-materialize plugin，它提供了一些方便的指令。然后您不需要在js中初始化，只需将material-select添加到您的选择：

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

Answer 6

对我来说，没有其他答案可行，因为我使用的是最新版本的MaterialiseCSS和Meteor，并且jquery版本之间存在不兼容性，Meteor 1.1.10使用jquery 1.11（覆盖此依赖性并不容易，可能会破坏Meteor / Blaze）并使用jquery 2.2测试Materialise工作正常。有关详细信息，请参阅https://stackoverflow.com/a/34809976/2882279。

这是一个已知的问题，下拉列表并在物化中选择0.97.2和0.97.3;有关详细信息，请参阅https://github.com/Dogfalo/materialize/issues/2265和https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931。

我在Meteor中使用Sass版本的MaterialiseCSS并在我的meteor包文件中使用poetic：materialize-scss@1.97.1解决了这个问题，以强制使用旧版本。下拉列表现在有效，旧jquery和所有！

Answer 7

这也适用：class =＆＃34; browser-default＆＃34;

Answer 8

仅在呈现html后调用materialize css jquery代码。因此，您可以拥有一个控制器，然后触发一个调用控制器中的jquery代码的服务。这将使选择按钮变好。但是，如果您尝试使用ngChange或ngSubmit，则由于select标签的动态样式，它可能无法正常工作。

Answer 9

这仅对我有用：

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});

Answer 10

我发现自己处于使用所选解决方案的情况

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

无论出于何种原因抛出错误，因为找不到material_select（）函数。不可能只说<select class="browser-default... 因为我使用的是自动渲染表单的框架。所以我的解决方案是使用js（Jquery）

添加类

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

Answer 11

这对我有用，没有jquery或选择带有输入类的包装器，只有material.js和这个香草js：

document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('select');
            var instances = M.FormSelect.init(elems);
        });

您可以说我得到了物化CSS的实际样式，而不是浏览器的默认样式。

Answer 12

对于默认浏览器，

<head>
     select {
            display: inline !important;
         }
</head>

或者链接Jquery库和本地/ CDN实现文件之后的Jquery解决方案

<script>
(function($){
  $(function(){
    // Plugin initialization
    $('select').not('.disabled').formSelect();
  }); 
})(jQuery); // end of jQuery name space

我真的很喜欢这个框架，但是到底要显示什么：无...

Answer 13

为了跟进这一点，因为最佳答案建议不使用materializecss ...在当前版本的物化中，您不再需要初始化选择。

实现CSS - 选择看起来不像渲染

13 个答案: