实体化 CSS-选择似乎不渲染

我目前正在工作的物化 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>

122778 次浏览
小开
最佳答案

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

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

在你加载了那个文件之后。

小开

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

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

动态创建的 select 。如果我动态地创建选择，比如在 Ember 这样的框架中，它会动态地生成视图，那该怎么办？我必须在每个视图中添加逻辑，以便在每次生成视图时初始化选择框，或者编写一个视图混合器来处理这个问题。更糟糕的是: 当视图生成时，用 Ember 术语 didInsertElement被调用，对选择框的选项列表的绑定可能还没有解析，所以我需要特殊的逻辑来观察选项列表，直到它被填充后才调用 material_select。如果选项发生变化，就像它们很容易发生的那样，material_select对此毫不知情，也不会更新下拉列表。当选项发生变化时，我可以再次调用 material_select，但是看起来它什么也不做(被忽略)。

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

实施 。从审美的角度来看，我也不赞成具体化 CSS 实现其下拉菜单的方式，即在 DOM 的其他地方创建一个并行的、阴影的元素集。当然，诸如 select2之类的替代选项也可以做同样的事情，而且可能没有其他方法来实现某些视觉效果(真的吗?).不过对我来说，当我检查一个元素时，我想看到的是该元素，而不是某人在其他地方神奇创建的某个阴影版本。

当 Ember 撕裂视图时，我不确定具体化的 CSS 撕裂了它创建的影子元素。事实上，如果真是这样，我会很惊讶的。如果我的理论是正确的，随着视图的生成和撕毁，您的 DOM 将最终被几十组没有连接到任何东西的阴影下拉列表所污染。这不仅适用于 Ember，也适用于任何其他基于 MVC/模板的 OPA 前端框架。

绑定 。我还不能弄清楚如何获得对话框中选择的值，以将其绑定回 Ember 这样的框架中的任何有用内容，Ember 通过 \{\{view 'Ember.Select' value=country}}类型接口调用选择框。换句话说，当选择某些内容时，country不会更新。这是一个交易破坏者。

海浪。顺便说一下，同样的问题也适用于按钮上的“ wave”效果。每次创建按钮时都必须对其进行初始化。我个人并不关心 wave 效应，也不明白为什么要大惊小怪，但是如果你真的想要 wave，你要知道，你的余生将花费大量的时间来担心如何在每个按钮被创建的时候初始化它。

我很欣赏实体化 CSS 家伙所做的努力，那里有一些很好的视觉效果，但它太大了，有太多的陷阱，如上面的东西，我会使用。我现在正在计划从我的应用程序中取出具体化的 CSS，然后回到 Bootstrap 或者在 Suit CSS 上面添加一个图层。你的工具应该让你的生活更轻松，而不是更艰难。

小开

只是跟进这一点，因为顶部的答案建议不要使用材质化... 在当前的材质化版本中，您不再需要初始化选择。

小开

@ littleguy23这是正确的，但你不想这样做，以多选择。所以只需要对代码做一个小小的修改:

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

只有在 HTML 呈现之后才调用 ateralize css jquery 代码。因此，您可以拥有一个控制器，然后触发一个调用控制器中的 jquery 代码的服务。这会显示选择按钮。无论如何，如果您尝试使用 ngChange 或 ngSubmit，由于 select 标记的动态样式，它可能无法工作。

小开

对于我来说，其他的答案都不起作用，因为我使用的是最新版本的 MatrializeCSS 和 Metaor，而且 jquery 版本之间存在不兼容性，Metaor 1.1.10使用的是 jquery 1.11(覆盖这个依赖关系并不容易，可能会破坏 Metaor/Blaze) ，使用 jquery 2.2测试 Matrialize 可以很好地工作。有关更多信息，请参见 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。

我正在使用流星中的材料化 CSS 的 Sass 版本，并通过在我的流星包文件中使用“诗意的: 材料化-scss@1.97.1”来强制使用旧版本来解决这个问题。下拉列表现在可以工作了，老 jquery 和所有！

小开

我使用的解决方案是在加载选项数据之后调用‘ Materials _ select’函数。如果输出 OptionsList.find ()的值。Count ()到控制台它是第一个0然后几毫秒之后列表就会被数据填充。

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

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

这也可以: class = “浏览器默认值”

小开

我发现自己处于这样一种情况: 使用所选择的解决方案

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

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

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

小开

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

确保在你处理完人口之后，触发这个内容更改如下:

$("#mySelect").trigger('contentChanged');
小开

只有这招对我管用:

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

这对我来说很有用，没有带输入类的 jquery 或选择包装器，只有 Materials al.js 和这个普通的 js:

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

enter image description here enter image description here

正如你可以告诉我，我得到了物化的 css 实际样式，而不是浏览器默认。

小开

对于默认浏览器,

<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

我真的很喜欢这个框架，但到底有什么展示: 没有..。


提交答案