Materialise CSS - Select 似乎没有渲染

Question

我目前正在使用 materialize CSS，似乎我已经被 select 字段所困扰。

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

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

这是我正在使用的示例：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

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

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

加载该文件后。

Answer 2

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

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

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

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

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

当 Ember 拆除视图时，我不确定 materialize CSS 拆除它创建的影子元素。事实上，如果它确实如此，我会感到非常惊讶。如果我的理论是正确的，随着视图的生成和拆除，您的 DOM 最终将被数十组未连接到任何东西的阴影下拉列表所污染。这不仅适用于 Ember，也适用于任何其他 MVC/template-based OPA 前端框架。

绑定。我也无法弄清楚如何在对话框中获取值 selected 以绑定回框架中有用的任何东西，例如 Ember 通过 select 框调用 {{view 'Ember.Select' value=country}}类型接口。换句话说，当某些东西被 selected 时，country 不会被更新。这是一个交易破坏者。

波。顺便说一下，同样的问题也适用于按钮上的 "wave" 效果。每次创建按钮时都必须初始化它。我个人并不关心波浪效应，也不明白有什么大惊小怪的，但如果你真的想要波浪，请注意，你将在余生中花费大部分时间来担心如何在创建按钮时初始化每个按钮。

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

Answer 3

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

Answer 4

@littleguy23 没错，但你不想对多个 select 这样做。所以只需对代码做一个小改动：

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

Answer 5

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

Answer 6

对我来说 none 其他答案有效，因为我使用的是最新版本的 MaterializeCSS 和 Meteor 并且 jquery 版本之间不兼容，Meteor 1.1.10 使用 jquery 1.11（覆盖这种依赖性并不容易，可能会破坏 Meteor/Blaze）并使用 jquery 2.2 测试 Materialise 工作正常。有关详细信息，请参阅。

这是 materialize 0.97.2 和 0.97.3 中下拉和选择的已知问题；有关详细信息，请参阅 https://github.com/Dogfalo/materialize/issues/2265 and https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931。

我在 Meteor 中使用 Sass 版本的 MaterializeCSS 并通过在我的 meteor 包文件中使用 poetic:materialize-scss@1.97.1 强制使用旧版本解决了这个问题。下拉菜单现在可用，旧 jquery 和所有！

Answer 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();
        }
    });
};

Answer 8

如果您使用 Angularjs，则可以使用 angular-materialize plugin，它提供了一些方便的指令。然后你不需要在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>

Answer 9

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

Answer 10

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

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

出于某种原因抛出错误，因为找不到 material_select() 函数。不可能只说 <select class="browser-default... 因为我使用的是一个自动呈现表单的框架。所以我的解决方案是使用 js(Jquery)

添加 class

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

Answer 11

首先，确保在 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 12

只有这个对我有用：

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

Answer 13

这对我有用，没有 jquery 或 select 带有输入 class 的包装器，只有 material.js 和这个 vanilla js:

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

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

Answer 14

对于默认浏览器，

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

或者 Jquery link t Jquery 库和你的 local/CDN 实现文件后的 Jquery 解决方案

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

我很喜欢这个框架，但到底有什么display:none...

Materialise CSS - Select 似乎没有渲染

Materialize CSS - Select Doesn't Seem to Render

html

javascript

css

materialize