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

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

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

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

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

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

Answer 3

首先，请确保在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');

Answer 4

这对我有用，没有jquery或选择包含输入类，只有material.js和这个vanilla js：

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

你可以告诉我，我得到了实现css的实际风格而不是浏览器的默认风格。

Answer 5

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

Answer 6

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

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

动态创建选择。如果我正在创建动态选择，例如在像Ember这样的框架中发生什么，它会动态生成视图？我必须在每个视图中添加逻辑以在每次生成视图时初始化选择框，或者编写视图mixin以便为我处理。而且更糟糕的是：当生成视图时，并且在Ember条件中调用didInsertElement时，对选择框的选项列表的绑定可能尚未解析，因此我需要特殊的逻辑观察选项列表以等到它是在调用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上的图层。你的工具应该让你的生活更轻松，而不是更难。

Answer 7

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

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

Answer 8

对我有用的解决方案是在加载选项数据后调用'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 9

如果你正在使用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 10

对我来说，没有其他答案可行，因为我使用的是最新版本的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：[email protected]来解决这个问题，以强制使用旧版本。下拉列表现在有效，旧jquery和所有！

Answer 11

这也适用：class =“browser-default”

Answer 12

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

Answer 13

只有这对我有用：

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