Материализовать CSS-Select, похоже, не отображается

конструкция select функциональность в материализовать CSS, на мой взгляд, довольно веская причина, чтобы не использовать его.

вы должны инициализировать элемент select с помощью material_select(), как упоминает @littleguy23. Если вы этого не сделаете, поле выбора даже не отображается! В старомодном приложении jQuery я могу инициализировать его в функции готовности документа. Угадайте, что ни я, ни многие другие люди не используют jQuery в эти дни, и мы не инициализируем наши приложения в готовом документе крюк.

динамически созданный выбирает. Что делать, если я создаю выбирает динамически, например, происходит в рамках, как Эмбер, который генерирует представления на лету? Я должен добавить логику в каждом представлении, чтобы инициализировать поле выбора каждый раз, когда создается представление, или написать представление mixin для обработки этого для меня. И это еще хуже: когда вид генерируется, и в угольных терминах didInsertElement вызывается, привязка к списку параметров для поля выбора может не быть решено еще, поэтому мне нужна специальная логика, наблюдающая за списком опций, чтобы дождаться его заполнения, прежде чем звонить в material_select. Если параметры меняются, как они легко могли бы,material_select понятия не имеет об этом и не обновляет выпадающий список. Я могу позвонить material_select снова, когда параметры меняются, но кажется, что это ничего не делает (игнорируется).

другими словами, Похоже, что предположение о дизайне, лежащее в основе выбора полей CSS, заключается в том, что все они находятся при загрузке страницы, и их ценности никогда не меняются.

реализация. С эстетической точки зрения, я также не в пользу того, как материализуется CSS реализует свои выпадающие списки, которые должны создавать параллельный, теневой набор элементов где-то еще в DOM. Конечно, альтернативы, такие как select2, делают то же самое, и не может быть никакого другого способа достичь некоторых визуальных эффектов (действительно?). Для меня, однако, когда я проверяю элемент, я хочу видеть элемент, а не какую-то тень версия где-то еще, что кто-то волшебным образом создал.

когда Ember Срывает представление, я не уверен, что материализованный CSS Срывает теневые элементы, которые он создал. На самом деле, я был бы очень удивлен, если бы это произошло. Если моя теория верна, поскольку представления генерируются и разрушаются, ваш DOM будет в конечном итоге загрязнен десятками наборов теневых выпадающих списков, не связанных ни с чем. Это относится не только к Ember, но и к любому другому интерфейсу OPA на основе MVC / шаблонов рамки.

привязки. Я также не смог выяснить, как получить значение, выбранное в диалоговом окне, чтобы привязать его к чему-либо полезному в рамках, таких как Ember, который вызывает поля выбора через {{view 'Ember.Select' value=country}} тип интерфейса. Другими словами, когда что-то выбрано, country не обновляется. Это нарушение сделки.

волны. Кстати, те же вопросы относятся и к эффекту "волны" на кнопках. Вы должны инициализировать его каждый время создания кнопки. Я лично не забочусь о волновом эффекте и не понимаю, из-за чего вся эта суета, но если вам нужны волны, знайте, что вы проведете большую часть своей жизни, беспокоясь о том, как инициализировать каждую кнопку, когда она будет создана.

Я ценю усилия, приложенные ребятами из materialize CSS, и там есть некоторые хорошие визуальные эффекты, но он слишком большой и имеет слишком много gotchas, таких как выше, чтобы быть чем-то, что я бы использовать. Теперь я планирую вырвать материализованный CSS из своего приложения и вернуться либо к Bootstrap, либо к слою поверх костюма CSS. Ваши инструменты должны сделать вашу жизнь проще, а не сложнее.

@littleguy23 это правильно, но вы не хотите делать это для множественного выбора. Так что просто небольшое изменение в коде:

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

решение, которое сработало для меня, заключается в вызове функции "material_select" после загрузки данных параметров. Если вы распечатаете значение OptionsList.находить.)(count () для консоли это сначала 0, затем через несколько миллисекунд список заполняется данными.

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

};

Если вы используете Angularjs, вы можете использовать угловое-материализовать плагин, что обеспечивает некоторые удобные директивы. Тогда вам не нужно инициализировать в 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>

для меня ни один из других ответов не работал, потому что я использую последнюю версию MaterializeCSS и Meteor, и есть несовместимость между версиями jquery, Meteor 1.1.10 использует jquery 1.11 (переопределение этой зависимости нелегко и, вероятно, сломает Meteor/Blaze), а тестирование материализуется с помощью jquery 2.2 отлично работает. См.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.

Я использую версию Sass MaterializeCSS в Meteor и работал над проблемой с помощью poetic:[email protected] в моем файле пакетов meteor, чтобы заставить старую версию. Выпадающие списки теперь работают, старый jquery и все!

Это тоже работает: class = "browser-default"

вызовите материализованный код css jquery только после отображения html. Таким образом, вы можете иметь контроллер, а затем запустить службу, которая вызывает код jquery в контроллере. Это будет отображать кнопку выбора в порядке. Как бы то ни было, если вы попытаетесь использовать ngChange или ngSubmit, это может не сработать из-за динамического стиля тега select.

я оказался в ситуации, когда с помощью выбранного решения

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

по какой-то причине было бросать ошибки, потому что функция material_select() не может быть найден. Нельзя было просто сказать <select class="browser-default... Потому что я использовал фреймворк, который автоматически визуализировал формы. Поэтому моим решением было добавить класс с помощью js (Jquery)

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

во-первых, убедитесь, что вы инициализировать его в документ.готов вот так:

$(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');

просто следить за этим, так как верхний ответ рекомендует не использовать materializecss... в текущей версии materialize вам больше не нужно инициализировать selects.