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

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

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

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

802閲覧

Javascriptでhtmlのselectタグを生成したいが、状況によって動かなくなってしまいます(CSSフレームワークはMaterializeを使用)

osakana1990

総合スコア16

Materialize

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/03/18 10:44

編集2019/03/20 06:43

現在Webページの入力フォームを作成しており、その中で「入社年月日」をHTMLのセレクトタグで選択する箇所があります。
常に現時点の年月を選択範囲に含めたいため、Javascriptで現在の日付を取得し、HTMLのselectタグを生成するコードを書いているのですが、思った通りにselectタグが生成されず悩んでおります。

スーパーリロードをした時だけ、正常にselectタグが生成されるので、原因はキャッシュ関連なのかなと思っていますが、それ以上の原因がどうしてもわからないため、どなたかお分かりになる方にアドバイスをいただけますと幸いです。。

※CSSフレームワークはMaterialize1.0.0を利用しています

HTML

1<div class="input-field"> 2 <select id='id_year' required> 3 <option value="" disabled selected>選択してください</option> 4 </select> 5 <label>入社した年</label> 6</div>

JavaScript

1// 年月の入力フォームで、常に現在時点を反映する機能 2 3$(window).on('load', function(){ 4 5 // 現在のページのパスを変数に取得する 6 var path = location.pathname 7 8 // パスの中に「review3」の文字列が含まれていた場合、以下を実行する 9 if(path.match('review3')){ 10 11 (function(){ 12 'use strict'; 13 14 // 現在時刻を変数化 15 var optionLoop, this_year, today; 16 today = new Date(); 17 this_year = today.getFullYear(); 18 19 // selectのoption生成のループ処理 20 optionLoop = function(start, end, id){ 21 var i, opt; 22 23 opt = null; 24 for (i = start; i >= end; i--){ 25 if (i === this_year + 1){ 26 opt += "<option value='' disabled selected>選択してください</option>" 27 } else { 28 opt += "<option value='" + i + "'>" + i + "</ooption>"; 29 } 30 } 31 return document.getElementById(id).innerHTML = opt; 32 }; 33 optionLoop(this_year + 1, 1950, 'id_year'); 34 })(); 35 36 } else { 37 // パスの中に「review3」の文字列が含まれていなかった場合、何もしない 38 ; 39 } 40});

通常のページ読み込み時(selectタグが生成されない画面)
イメージ説明

スーパーリロードした時(selectタグが生成される)
イメージ説明

お手数おかけしますが、アドバイスなどいただけますと幸いです。
何卒よろしくお願い致します。

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

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

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

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

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

m.ts10806

2019/03/18 11:28

利用されているCSSフレームワークは何でしょうか。 タグに追加と本文にバージョンもご提示ください
m.ts10806

2019/03/18 11:29

あ、ごめんなさい。Materializeですね。 いずれにしてもバージョンは追加してください。最新のものとひとつ前のものでは仕様が若干異なります。
osakana1990

2019/03/18 11:35

コメントありがとうございます! 使用しているフレームワークのバージョンはmaterialize 1.0.0です。 (CDNで利用しております)
osakana1990

2019/03/18 11:42

また、タグにはMaterializeがなかったので、タグ追加の依頼しました。
moredeep

2019/03/19 00:52

提示のコードのみを使ってみても特に再現しないようです。(IE, Edge, Chrome, FireFox) 提示されているコードだけを使っても再現しますか? 現象が発生するHTMLはこれ以外の処理を持っていますか? 現象が発生する際にデバッグしたらどうなりますか? (onload自体実行されない、location.pathnameがうまくとれていない、innerHTMLへの代入まで出来ている等々) 質問とは関係ありませんが・・・ optをnullで初期化し、その後+=で文字列を足しています。 nullが入っている変数に+=で文字列を足すと、"null"という文字列が頭についてしまいます。 nullではなく空文字で初期化するか、最初の1回は+=ではなく=を使うようにしなければいけません。
m.ts10806

2019/03/19 01:00

タグについては「レスポンシブWebデザイン」とか「Material Design」とか 「CSS」はつけておいたほうが良いように思います。
osakana1990

2019/03/20 06:24

>moredeepさん アドバイスありがとうございます! 提示したコードだけで検証したら動きました。 mts10806さんがご指摘いただいたように、原因はMaterializeのJSによるHTMLの書き換えのようでした! また、optの初期化のご指摘もありがとうございます!ご提示いただいた方法で修正してみようと思います。
guest

回答2

0

ベストアンサー

動的に要素を作っているようですし、要素をHTML上にinnerHTMLで入れた後に
Initializationの宣言が必要に思います。

私もよくAjaxで動的に生成するときはありますが、Initializationをしておかないと
そもそも要素が生成されなかったりします。
実際はselectタグを装飾しているわけではなくてinput type=textとulを組み合わせているため、
materializeのjsによりHTMLの書き換えが発生しています。
イメージ説明

あと細かいところですが</ooption>じゃなくて</option>ですね。

ただ、innerHTMLよりもcreateElementでoption作ってappend(teratail過去質問の回答)の方が確実かなと。

投稿2019/03/19 01:05

編集2019/03/19 01:09
m.ts10806

総合スコア80875

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

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

osakana1990

2019/03/20 06:26 編集

丁寧にご回答くださり誠にありがとうございます! おっしゃる通り、innerHTMLの後にinitializationをすることで解決できました! もしご存知であれば伺いたいのですが、 ご提示いただいた画像のように自分でも検証ツールで見てみたら確かにselectタグは消えていました。 JSの関数の引数に指定しているid(id_year)もseletタグと一緒に消えていたので、JSで生成したoptionタグが表示されないのも理解できました。 ただ、initializationしたあともselectタグが消えているのは同じだったので、逆になぜ動いているのかがよく理解できず。。笑 大変恐れ入りますが、もしよろしければinitializationの宣言により動いた理由をご教授いただけますと幸いです・・・! (初心者のため理解不足で申し訳ございません)
m.ts10806

2019/03/20 06:20

消えているわけではなく、tabindexに-1が指定されて、display:noneで非表示にされているだけです。もう少しElementsの下のほうを見てください。 ▼アイコンがsvgで、その下あたり。 あとは動かしながらElementsの変化を見てみてください。 細かいところはMaterializeの仕様なのでコードみていったほうがいいかもしれませんが、(私もしっかり見たわけではないですが) liのクリックイベントで何を選択しているかも分かるので、そこと実際のselectのoptionのvalueと連動しているのではないかなと。
osakana1990

2019/03/20 06:41

ご回答ありがとうございます! おっしゃる通り、selectタグは消えておりませんでした。 initializeした場合としていない場合でselectタグに関しては違いが見られなかったので、li要素とselectの関連性の部分をもう少し見てみようかと思います。 とても勉強になりました、ありがとうございます。
m.ts10806

2019/03/20 06:42

理解に繋がったようで何よりです
guest

0

違うような気もしますが

javascript

1<script> 2$(function(){ 3 $('#id_year option:eq(0)').prop('disabled',true); 4 var y=new Date().getFullYear(); 5 for(var i=y;i>=1950;i--){ 6 $('#id_year').append($('<option>').val(i).text(i)); 7 } 8}); 9</script> 10<div class="input-field"> 11 <select id='id_year' required> 12 <option value="" selected>選択してください</option> 13 </select> 14 <label>入社した年</label> 15</div>

投稿2019/03/19 02:21

yambejp

総合スコア116726

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

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

osakana1990

2019/03/20 06:19

ご回答くださりありがとうございます! いただいたコードで処理して見たのですが、Materializeを使っていない状態だとうまく動いたのですが、使っている状態だと動きませんでした。。。 やはりMaterializeのJSとぶつかってしまうのが原因のようです ただ、こちらのコードの方が短く、こういう書き方ができるのだと勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問