Javascript 物化 CSS - 选择似乎没有渲染

Materialize CSS - Select Doesn't Seem to Render

提问by Ryan Rentfro

I am currently working with materialize CSS and it seems I've gotten snagged with the select fields.

我目前正在使用 materialize CSS，似乎我已经被选择字段束缚住了。

I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else might be able to help.

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

What I am trying to do is create a row with 2 end spacers that provide padding - then within the inner two row items there should be a search text input and a search select dropdown.

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

This is the example I'm working from: http://materializecss.com/forms.html

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

Thank you in advance.

先感谢您。

Here is the snippet of code in question.

这是有问题的代码片段。

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

回答by jameslittle230

Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and then call

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

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

after you've loaded that file.

加载该文件后。

回答by Ryan Rentfro

The design of selectfunctionality in materialize CSS is, in my opinion, a pretty good reason not to use it.

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

You have to initialize the select element with material_select(), as @littleguy23 mentions. If you don't, the select box is not even displayed! In an old-fashioned jQuery app, I can initialize it in the document ready function. Guess what, neither I nor many other people are using jQuery these days, nor do we initialize our apps in the document ready hook.

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

Dynamically created selects. What if I am creating selects dynamically, such as happens in a framework like Ember which generates views on the fly? I have to add logic in each view to initialize the select box every time a view is generated, or write a view mixin to handle that for me. And it's worse than that: when the view is generated, and in Ember terms didInsertElementis called, the binding to the list of options for the select box may not have been resolved yet, so I need special logic observing the option list to wait until it's populated before making the call to the material_select. If the options change, as they easily might, material_selecthas no idea about that and does not update the dropdown. I can call material_selectagain when the options change, but it appears that that does nothing (is ignored).

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

In other words, it appears that the design assumption behind materialize CSS's select boxes is that they are all there at page load, and their values never change.

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

Implementation. From an aesthetic point of view, I am also not in favor of the way materialize CSS implements its dropdowns, which is to create a parallel, shadow set of elements somewhere else in the DOM. Granted, alternatives such as select2 do the same thing, and there may be no other way to achieve some of the visual effects (really?). To me, though, when I inspect an element, I want to see the element, not some shadow version somewhere else that somebody magically created.

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

When Ember tears down the view, I am not sure that materialize CSS tears down the shadow elements it has created. Actually, I'd be quite surprised if it does. If my theory is correct, as views are generated and torn down, your DOM will end up getting polluted with dozens of sets of shadow dropdowns not connected to anything. This applies not only to Ember but any other MVC/template-based OPA front-end framework.

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

Bindings. I also have not been able to figure out how to get the value selected in the dialog box to bind back to anything useful in a framework like Ember that invokes select boxes through a {{view 'Ember.Select' value=country}}type interface. In other words, when something is selected, countryis not updated. This is a deal-breaker.

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

Waves. By the way, the same issues apply to the "wave" effect on buttons. You have to initialize it every time a button is created. I personally don't care about the wave effect, and don't understand what all the fuss is about, but if you do want waves, be aware that you'll spend a good portion of the rest of your life worrying about how to initialize every single button when it's created.

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

I appreciate the effort made by the materialize CSS guys, and there are some nice visual effects there, but it's too big and has too many gotchas such as the above to be something that I would use. I'm now planning to rip out materialize CSS from my app and go back either to Bootstrap or a layer on top of Suit CSS. Your tools should make your life easier, not harder.

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

回答by DFlores009

@littleguy23 That is correct, but you don't want to do it to multi select. So just a small change to the code:

@littleguy23 没错，但您不想多选。所以只是对代码做一个小小的改动：

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

回答by Abel

This works too: class = "browser-default"

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

回答by lomelisan

This worked for me, no jquery or select wrapper with input class, just material.js and this vanilla js:

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

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

As you can tell I got the materialize css actual style and not the browsers default.

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

回答by Brandiqa

The solution that worked for me is by calling the 'material_select' function after the options data has been loaded. If you print out the value of OptionsList.find().count() to the console it's first 0 then a few milliseconds later the list gets populated with data.

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

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

回答by Artemis_134

If you're using Angularjs, you can use the angular-materialize plugin, which provides some handy directives. Then you don't need to initialize in the js, just add material-selectto your select:

如果您使用的是 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>

回答by Mozfet

For me none of the other answers worked because I am using the latest version of MaterializeCSS and Meteor and there is incompatability between the jquery versions, Meteor 1.1.10 uses jquery 1.11 (overriding this dependancy is not easy and will probably break Meteor/Blaze) and testing Materialise with jquery 2.2 works fine. See https://stackoverflow.com/a/34809976/2882279for more info.

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

This is a known issue with dropdowns and selects in materialize 0.97.2 and 0.97.3; for more info see https://github.com/Dogfalo/materialize/issues/2265and https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

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

I'm using the Sass version of MaterializeCSS in Meteor and worked around the problem by using poetic:[email protected] in my meteor packages file to force the old version. The dropdowns now work, old jquery and all!

我在 Meteor 中使用了 MaterializeCSS 的 Sass 版本，并通过在我的流星包文件中使用poetic:[email protected] 来强制使用旧版本来解决这个问题。下拉菜单现在可以工作了，旧的 jquery 等等！

回答by Nitish Phanse

Call the materialize css jquery code only after the html has rendered. So you can have a controller and then fire a service which calls the jquery code in the controller. This will render the select button alright. How ever if you try to use ngChange or ngSubmit it may not work due to the dynamic styling of the select tag.

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

回答by Igor Shumichenko

Only this worked for me:

只有这对我有用：

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