Materialize CSS - 选择似乎没有呈现答案

【问题标题】：Materialize CSS - Select Doesn't Seem to RenderMaterialize CSS - 选择似乎没有呈现
【发布时间】：2015-02-01 00:22:29
【问题描述】：

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

我正在使用他们网站提供的示例，但不幸的是它在视图中呈现。我想知道是否有其他人可以提供帮助。

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

这是我正在使用的示例：http://materializecss.com/forms.html

提前谢谢你。

这是有问题的代码的 sn-p。

<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 html css materialize

【解决方案1】：

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

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

在您加载该文件之后。

【讨论】：

否则你可以使用浏览器默认而不需要初始化：<select class="browser-default">
最新的更新日志这样说：Rename plugin call .material_select() to .formSelect()
不要在 $( document ).ready(function() { 中写这个，否则不会工作
嘘！我已经用头撞了一堵砖墙好几个小时试图弄清楚这一点......谢谢......
我正在做一个项目（Django + materialize）。由于 Select 无法正常工作，因此卡了两天。我以为我对 Django 做错了。当我查看源代码时，我意识到 Django 一切正常。我复制了整个 HTML 代码尝试在浏览器中运行它。最后，我得出的结论是“$('select').formSelect();”的错。谢谢。

【解决方案2】：

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

正如@littleguy23 提到的，您必须使用material_select() 初始化选择元素。如果你不这样做，选择框甚至不会显示！在一个老式的 jQuery 应用程序中，我可以在文档就绪函数中对其进行初始化。猜猜看，这些天我和其他许多人都没有使用 jQuery，我们也没有在 document ready 钩子中初始化我们的应用程序。

动态创建的选择。如果我动态创建选择，例如在 Ember 等动态生成视图的框架中发生，该怎么办？我必须在每个视图中添加逻辑以在每次生成视图时初始化选择框，或者编写一个视图混合来为我处理。更糟糕的是：当生成视图时，在 Ember 术语中调用 didInsertElement 时，可能尚未解决与选择框选项列表的绑定，所以我需要特殊的逻辑来观察选项列表等到它被填充后再调用material_select。如果选项发生变化，material_select 对此一无所知，也不会更新下拉列表。 I can call material_select again when the options change, but it appears that that does nothing (is ignored).

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

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

当 Ember 拆除视图时，我不确定具体化 CSS 是否拆除了它创建的阴影元素。实际上，如果确实如此，我会感到非常惊讶。如果我的理论是正确的，随着视图的生成和拆除，你的 DOM 最终会被数十组没有连接到任何东西的阴影下拉列表污染。这不仅适用于 Ember，还适用于任何其他基于 MVC/模板的 OPA 前端框架。

绑定。我也无法弄清楚如何让对话框中选择的值绑定回像 Ember 这样的框架中有用的东西，该框架通过{{view 'Ember.Select' value=country}} 类型接口调用选择框。换句话说，选择某些东西时，country未更新。这是一个交易破坏者。

波浪。顺便说一句，同样的问题也适用于按钮上的“波浪”效果。每次创建按钮时都必须对其进行初始化。我个人不关心波浪效应，也不明白大惊小怪是什么，但如果你确实想要波浪，请注意，你将在余生的大部分时间里担心如何在创建每个按钮时对其进行初始化。

我很欣赏 Materialise CSS 人员所做的努力，那里有一些不错的视觉效果，但它太大了，而且上面有太多的陷阱，我会使用它。我现在计划从我的应用程序中删除具体化 CSS，然后返回到 Bootstrap 或 Suit CSS 之上的一个层。您的工具应该让您的生活更轻松，而不是更难。

【讨论】：

感谢您的广泛回复。它的信息量很大，我同意你表达的很多观点。我真的很喜欢用很多东西实现 CSS 和他们的方法。我明白你在说什么，并且一直在思考现代应用程序所需要的所有“效果”。我还不确定这些类型的设计和概念是否适合大型软件。不过，我确实喜欢外观和概念。再次感谢您。
反响很好。 Materialize 也会遇到 SELECT 问题，例如滚动条上的单击事件会关闭 OPTIONs 列表。 @torazaburo 你最后怎么了？返回引导程序？
我花了足够的时间将我的大部分网页和表单转换为具体化，但现在卡在如何解决选择问题上。真的很糟糕，materializecss 有巨大的流量，但仍然没有解决这个小问题。如果您正在评估将其用于某些消费产品，请等到它成熟
@torazaburo 关于绑定：对我来说，使用包 ember-cli-materialize 然后 {{md-select content=model.blah optionValuePath='content.id' optionLabelPath='content.label' value=someField}} 做到了：它更新了控制器中的 someField 属性。
您可以使用<select class="browser-default">，并且您不必使用 js 进行初始化，您将拥有用户习惯的原生 UI。任何不使用本机 UI 的实现都需要 JS 初始化。

【解决方案3】：

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

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

【讨论】：

为什么？如果我们排除多个选择字段，它们将不起作用。

【解决方案4】：

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

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

如您所知，我得到了具体化 css 的实际样式，而不是浏览器的默认样式。

【讨论】：

【解决方案5】：

这也有效：class= "browser-default"

【讨论】：

【解决方案6】：

如果你使用 Angularjs，你可以使用angular-materialize plugin，它提供了一些方便的指令。那你就不用在js里初始化了，只需要在你的select中添加material-select即可：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

很高兴找到 Brandiqa！我已经从AppComponent.ngOnInit() 调用了$('select').material_select();，但是您需要在呈现<select/> html 之后调用它，我在dropdown.component.ts 中这样做了。解决方法是在使用下拉列表的任何组件中从 ngOnInit() 调用它。

【解决方案8】：

对我来说，其他答案都不起作用，因为我使用的是最新版本的 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 和所有！

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

只有这对我有用：

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

【讨论】：

【解决方案11】：

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

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

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

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

对于默认浏览器，

<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

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

【讨论】：

【解决方案14】：

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

【讨论】：

我使用的是 0.95.3 版本，但我仍然需要初始化选择。我做错了吗？
您仍然需要在 v0.96.1 中初始化（非浏览器默认）SELECT。
投反对票：它们在 v0.97.1 中，您仍然需要使用 javascript 初始化选择。
0.100.2：选择需要初始化。没有证据表明这个答案是正确的。