質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

MaterializeというCSSフレームワークのセレクトボックスが動かない

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,864

score 37

Materialize(http://materializecss.com/forms.html)というCSSフレームワークを用いてWebサイトを作っているのですが、そのフレームワーク中のセレクトボックスがどうしても動きません。

HTML、JavaScriptは以下のようにマニュアル通りに記述しています。
<div class="input-field col s12">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>
(function($){
  $(document).ready(function() {
    $('select').material_select();
  });
}(jQuery));

マニュアルのセレクトボックス部分のソースコードを見てみると、inputタグの次に
<ul id="select-options-491fefb3-0507-54f4-3a3a-f84b423eaef3" class="dropdown-content select-dropdown" style="width: 412px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"> ... </ul>
というulタグが生成されていたのですが、自分の方ではそのulタグが生成されていませんでした。
原因としてはどのようなことが考えられるでしょうか?

回答よろしくお願いいたします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

そのJavaScriptのコードを動作させるために必要なファイルが正常に読み込まれていない可能性があります。
htmlに次の様な記述があるか確認してみて下さい。
<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
</script>
<script src="bin/materialize.js"></script>
追記
動作を確認したhtml
<!DOCTYPE html>
  <html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <div class="input-field col s12">
        <select>
          <option value="" disabled selected>Choose your option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label>Materialize Select</label>
      </div>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript">
        (function($){
          $(document).ready(function() {
            $('select').material_select();
          });
        }(jQuery));
      </script>

    </body>
  </html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/01 21:07

    <script src="js/jquery.timeago.min.js"></script>
    <script src="js/prism.js"></script>
    <script src="js/init.js"></script>

    は何のことでしょうか?

    キャンセル

  • 2015/07/01 21:59

    Materializeの公式ドキュメントページのソースにあったのでとりあえず追加しておけば良いものかと思っていましたが、init.jsは寄付ボタンなどに使われているもので、prism.jsはシンタックスハイライトをするスクリプトみたいですね。
    timeago.min.jsもタイムスタンプの更新等をサポートするものみたいなので、その3つは恐らく不要です。
    jQuery本体とmaterialize.jsが読み込まれていれば大丈夫です。

    キャンセル

  • 2015/07/01 22:41

    このCSSフレームワークに含まれる、JavaScriptを使った他のパーツ(Modal等)は正常に動作していますので、jQuery本体とmaterialize.jsは読み込まれているはずです。

    キャンセル

  • 2015/07/01 22:51

    こちらで実際に試してみましたが問題なく動作しました。
    一応htmlを回答の方に追記しておきますので、ご自身のファイルとの違いなどがないか確認してみて下さい。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る