物化CSS-选择似乎不渲染

我目前正在使用Materialized 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>

由于它们会覆盖浏览器的默认设置，因此选择样式需要运行Javascript。您需要包括Materialise Javascript文件，然后调用

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

加载该文件后。

select我认为，实现CSS 的功能设计是不使用它的充分理由。

material_select()如@ littleguy23 所述，您必须使用初始化select元素。如果不这样做，选择框甚至不会显示！在老式的jQuery应用程序中，我可以在文档就绪函数中对其进行初始化。猜猜是什么，这些天我和其他很多人都没有使用jQuery，也没有在文档就绪挂钩中初始化我们的应用程序。

动态创建的选择。如果我动态创建选择，例如在Ember这样的框架中动态生成视图怎么办？我必须在每个视图中添加逻辑以在每次生成视图时初始化选择框，或者编写一个视图mixin来为我处理。更糟糕的是：当生成视图并didInsertElement调用Ember时，可能尚未解决对选择框选项列表的绑定，因此我需要特殊的逻辑来观察选项列表，直到它被呼叫之前先填入material_select。如果选项很容易更改，则material_select对此一无所知，并且不会更新下拉菜单。material_select选项更改时，我可以再次致电，但似乎什么也没做（被忽略）。

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

实施。从美学的角度来看，我也不赞成采用CSS实现其下拉菜单的方式，即在DOM中的其他位置创建一个平行的阴影集。当然，诸如select2之类的替代方法也做同样的事情，并且可能没有其他方法可以实现某些视觉效果（真的吗？）。对我来说，当我检查一个元素时，我想看到的是元素，而不是别人神奇创建的其他阴影版本。

当Ember拆除视图时，我不确定实现CSS会拆除其创建的阴影元素。实际上，如果这样做的话，我会感到非常惊讶。如果我的理论是正确的，那么在生成视图并删除视图时，您的DOM最终将被数十个未连接任何对象的阴影下拉列表污染。这不仅适用于Ember，而且适用于任何其他基于MVC /模板的OPA前端框架。

绑定。我还无法弄清楚如何在对话框中获取所选的值，以将其绑定回诸如Ember之类的框架中有用的东西，该框架通过{{view 'Ember.Select' value=country}}类型接口调用选择框。换句话说，当选择某项时，country不会更新。这是一个破坏交易的行为。

波浪。顺便说一句，相同的问题适用于按钮上的“波动”效果。每次创建按钮时都必须对其进行初始化。我个人并不关心波动的影响，也不了解到底有什么大惊小怪的，但是，如果您确实想要波动，请注意，您将在余下的大部分时间里都在担心如何波动。在创建每个按钮时对其进行初始化。

我感谢物化CSS专家付出的努力，并且那里有一些不错的视觉效果，但是它太大了，并且有太多诸如此类的陷阱，我将使用。我现在正计划从我的应用程序中删除实体化CSS，然后返回到Bootstrap或Suit CSS之上的一层。您的工具应该使您的生活更轻松，而不是更艰难。

@ littleguy23是正确的，但是您不想这样做以进行多选。因此，只需对代码做一点改动：

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

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

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

如您所知，我得到了实现的CSS实际样式，而不是浏览器的默认样式。

这也起作用：class =“ browser-default”

如果您使用的是Angularjs，则可以使用angular-materialize插件，该插件提供了一些方便的指令。然后，您无需在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>

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

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

对我来说，没有其他答案有效，因为我使用的是最新版本的MaterializeCSS和Meteor，并且jquery版本之间不兼容，Meteor 1.1.10使用jquery 1.11（覆盖此依赖关系并不容易，可能会破坏Meteor / Blaze）并使用jquery 2.2测试Materialize效果很好。有关更多信息，请参见 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版本的MaterializeCSS，并通过在我的流星包文件中使用poetic：materialize-scss@1.97.1来解决该问题，以强制使用旧版本。下拉列表现在可以使用了，旧的jQuery以及所有功能都可以使用！

仅在html渲染后才调用实现CSS jQuery代码。因此，您可以拥有一个控制器，然后启动一个服务，该服务调用该控制器中的jquery代码。这将使选择按钮正确。但是，由于select标签的动态样式，尝试使用ngChange或ngSubmit可能无法正常工作。

只有这对我有用：

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

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

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

由于找不到material_select（）函数，无论出于何种原因引发错误。不能只说<select class="browser-default... 一句，因为我正在使用一个自动呈现表单的框架。所以我的解决方案是使用js（Jquery）添加类

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

首先，请确保在document.ready中初始化它，如下所示：

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

然后，以所需的方式用数据填充它。我的例子：

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

确保在完成填充之后，像这样触发此contentChanged：

$("#mySelect").trigger('contentChanged');

对于默认浏览器，

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

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

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

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

只是为了跟进此操作，因为最佳答案建议不要使用materializecss ...，在当前版本的实现中，您不再需要初始化选择。