マテリアライズCSS-選択するとレンダリングされないようです

私は現在マテリアライズCSSを使用していますが、選択フィールドを取得しているようです。

私は彼らのサイトから提供された例を使用していますが、残念ながらそれはビューにレンダリングされています。他の誰かが手伝ってくれるのではないかと思っていました。

私がやろうとしていることは、パディングを提供する2つのエンドスペーサーを持つ行を作成することです。次に、内側の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>

ブラウザーのデフォルトをオーバーライドするため、選択スタイリングを実行するにはJavaScriptが必要です。マテリアライズJavascriptファイルをインクルードし、次に呼び出す必要があります

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

そのファイルをロードした後。

selectマテリアライズCSS の機能の設計は、私の意見では、CSSを使用しないかなり良い理由です。

material_select()@ littleguy23が言及しているように、select要素をで初期化する必要があります。そうしないと、選択ボックスは表示されません！昔ながらのjQueryアプリでは、ドキュメント対応関数で初期化できます。最近、私も他の多くの人々もjQueryを使用しておらず、ドキュメント準備フックでアプリを初期化していません。

動的に作成されたselect。オンザフライでビューを生成するEmberのようなフレームワークで発生するように、selectを動的に作成している場合はどうなりますか？各ビューにロジックを追加して、ビューが生成されるたびに選択ボックスを初期化するか、それを処理するビューミックスインを作成する必要があります。そして、それよりも悪いです：ビューが生成され、Ember用語didInsertElementが呼び出されたとき、選択ボックスのオプションのリストへのバインディングはまだ解決されていない可能性があるため、オプションリストを監視して、それが完了するまで待機する特別なロジックが必要ですを呼び出す前に入力されますmaterial_select。オプションが変更された場合、それらは簡単に変更される可能性がありますが、material_selectそれについては何もわからず、ドロップダウンは更新されません。material_selectオプションが変更されたときに再度電話をかけることはできますが、何も起こらないようです（無視されます）。

言い換えると、CSSの選択ボックスを具体化する背後にある設計の前提は、ページの読み込み時にすべてが存在し、それらの値は決して変更されないということです。

実装。美的観点から、CSSがそのドロップダウンを実装する方法にも賛成しません。これは、DOMの他の場所に要素の平行なシャドウセットを作成することです。確かに、select2などの代替手段は同じことを行い、視覚効果の一部を実現する他の方法はありません（本当に？）。しかし、私にとっては、要素を検査するときに、誰かが魔法のように作成したシャドウバージョンではなく、要素を確認したいと考えています。

Emberがビューを破棄するとき、マテリアライズCSSが作成したシャドウ要素を破棄するかどうかはわかりません。実際、そうなったとしても、私はかなり驚きます。私の理論が正しければ、ビューが生成されて分解されると、DOMは何にも接続されていない数十のシャドウドロップダウンセットで汚染されることになります。これはEmberだけでなく、その他のMVC /テンプレートベースのOPAフロントエンドフレームワークにも当てはまります。

バインディング。また、ダイアログボックスで選択した値を取得して、{{view 'Ember.Select' value=country}}型インターフェイスを介して選択ボックスを呼び出すEmberなどのフレームワークで有用なものにバインドする方法を理解できませんでした。つまり、何かを選択しcountryても更新されません。これは契約解除者です。

波。ちなみに、同じ問題がボタンの「波」効果にも当てはまります。ボタンが作成されるたびに初期化する必要があります。私は個人的には波の影響を気にせず、すべての大騒ぎが何であるかを理解していませんが、波が必要な場合は、残りの人生のかなりの部分をどのように過ごすかについて気を付けてください。作成時にすべてのボタンを初期化します。

CSSを具体化する人たちの努力に感謝し、そこには素晴らしい視覚効果がいくつかありますが、それは大きすぎて、上記のような問題が多すぎて私が使用するものにはなりません。私は今、アプリからCSSをマテリアライズし、BootstrapまたはSuit CSS上のレイヤーに戻ることを計画しています。あなたのツールは、あなたの人生をより難しくなく、より簡単にするはずです。

@ littleguy23正解ですが、複数選択する必要はありません。したがって、コードを少し変更するだけです。

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

これは私にとってはうまくいきました、jqueryまたは入力クラスの選択ラッパーではなく、material.jsとこのバニラjsだけです：

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

ご覧のとおり、ブラウザのデフォルトではなく、マテリアライズCSSの実際のスタイルを取得しました。

これも機能します：class = "browser-default"

Angularjsを使用している場合、いくつかの便利なディレクティブを提供するangular-materializeプラグインを使用できます。次に、jsで初期化する必要はありません。selectに追加material-selectするだけです。

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

私にとってうまくいった解決策は、オプションデータが読み込まれた後に 'material_select'関数を呼び出すことです。OptionsList.find（）。count（）の値をコンソールに出力すると、最初は0で、数ミリ秒後にリストにデータが入力されます。

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

MaterializeCSSとMeteorの最新バージョンを使用していて、jqueryのバージョン間に互換性がないため、私にとって他の回答はどれも機能しませんでした。 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を参照してください。

MeteorでMaterializeCSSのSassバージョンを使用していて、meteorパッケージファイルでpoetic：materialize-scss@1.97.1を使用して古いバージョンを強制することで問題を回避しました。ドロップダウンが機能するようになりました。古いjqueryなどです。

htmlがレンダリングされた後にのみ、マテリアライズcss jqueryコードを呼び出します。そのため、コントローラーを用意して、コントローラーのjqueryコードを呼び出すサービスを起動できます。これにより、選択ボタンが正常にレンダリングされます。ngChangeまたはngSubmitを使用しようとしても、selectタグの動的なスタイル設定が原因で機能しない場合があります。

これだけが私にとってうまくいきました：

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

選択したソリューションを使用している状況に私は気づきました

$(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で次のように初期化してください。

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

デフォルトのブラウザの場合、

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

または、リンク後のJqueryソリューションJqueryライブラリとローカル/ CDNマテリアライズファイル

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

私はこのフレームワークが本当に好きですが、一体何を表示するのですか？

トップの答えはmaterializecssを使用しないことを推奨しているので、これをフォローアップするだけです...マテリアライズの現在のバージョンでは、selectを初期化する必要はありません。