1. ホーム
  2. javascript

[解決済み] Materialize CSS - セレクトがレンダリングされないようです。

2022-02-02 01:57:19

質問

現在、Materialize CSSを使用していますが、selectフィールドでつまづいたようです。

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

私がやろうとしていることは、パディングを提供する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が必要です。MaterializeのJavascriptファイルをインクルードし、その中で

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

を読み込んだ後、そのファイルを