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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

6857閲覧

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

iniesta

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2015/07/01 10:32

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

HTML、JavaScriptは以下のようにマニュアル通りに記述しています。

lang

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

lang

1(function($){ 2 $(document).ready(function() { 3 $('select').material_select(); 4 }); 5}(jQuery));

マニュアルのセレクトボックス部分のソースコードを見てみると、inputタグの次に

lang

1<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タグが生成されていませんでした。
原因としてはどのようなことが考えられるでしょうか?

回答よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

そのJavaScriptのコードを動作させるために必要なファイルが正常に読み込まれていない可能性があります。
htmlに次の様な記述があるか確認してみて下さい。

lang

1<!-- Scripts--> 2<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 3<script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); } 4</script> 5<script src="bin/materialize.js"></script>

追記
動作を確認したhtml

lang

1<!DOCTYPE html> 2 <html> 3 <head> 4 <!--Import materialize.css--> 5 <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 6 7 <!--Let browser know website is optimized for mobile--> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 9 </head> 10 11 <body> 12 13 <div class="input-field col s12"> 14 <select> 15 <option value="" disabled selected>Choose your option</option> 16 <option value="1">Option 1</option> 17 <option value="2">Option 2</option> 18 <option value="3">Option 3</option> 19 </select> 20 <label>Materialize Select</label> 21 </div> 22 23 <!--Import jQuery before materialize.js--> 24 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 25 <script type="text/javascript" src="js/materialize.min.js"></script> 26 <script type="text/javascript"> 27 (function($){ 28 $(document).ready(function() { 29 $('select').material_select(); 30 }); 31 }(jQuery)); 32 </script> 33 34 </body> 35 </html>

投稿2015/07/01 10:55

編集2015/07/01 13:53
flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iniesta

2015/07/01 12:07

<script src="js/jquery.timeago.min.js"></script> <script src="js/prism.js"></script> <script src="js/init.js"></script> は何のことでしょうか?
flat

2015/07/01 12:59

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

2015/07/01 13:41

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

2015/07/01 13:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問