javascript - Materialize 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>

score 253 · Accepted Answer

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

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

加载该文件后。

score 53 · Accepted Answer

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

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

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

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

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

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

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

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

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

score 9 · Accepted Answer

@littleguy23 是正确的，但您不想多选。所以只需对代码做一点小改动：

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

score 8 · Accepted Answer

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

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

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

score 6 · Accepted Answer

6

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

于 2017-07-03T19:51:25.833 回答

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

只有这对我有用：

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

对于默认浏览器，

<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

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

score -5 · Accepted Answer

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

javascript - Materialize CSS - 选择似乎没有呈现

14 回答 14

Related

Reference