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

Question

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

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

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

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

// 年月の入力フォームで、常に現在時点を反映する機能

$(window).on('load', function(){
	
	// 現在のページのパスを変数に取得する
	var path = location.pathname

	// パスの中に「review3」の文字列が含まれていた場合、以下を実行する
	if(path.match('review3')){
		
		(function(){
			'use strict';
			
			// 現在時刻を変数化
			var optionLoop, this_year, today;
			today = new Date();
			this_year = today.getFullYear();
		
			// selectのoption生成のループ処理
			optionLoop = function(start, end, id){
				var i, opt;
		
				opt = null;
				for (i = start; i >= end; i--){
					if (i === this_year + 1){
						opt += "<option value='' disabled selected>選択してください</option>"
					} else {
						opt += "<option value='" + i + "'>" + i + "</ooption>";
					}
				}
			return document.getElementById(id).innerHTML = opt;
			};
			optionLoop(this_year + 1, 1950, 'id_year');	
		})();
		
	} else {
	// パスの中に「review3」の文字列が含まれていなかった場合、何もしない
		;
	}
});

通常のページ読み込み時（selectタグが生成されない画面）

スーパーリロードした時（selectタグが生成される）

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

Comments

[m.ts10806]

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

[m.ts10806]

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

[osakana1990]

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

[osakana1990]

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

[moredeep]

提示のコードのみを使ってみても特に再現しないようです。(IE, Edge, Chrome, FireFox)

提示されているコードだけを使っても再現しますか？
現象が発生するHTMLはこれ以外の処理を持っていますか？
現象が発生する際にデバッグしたらどうなりますか？
(onload自体実行されない、location.pathnameがうまくとれていない、innerHTMLへの代入まで出来ている等々)

質問とは関係ありませんが・・・
optをnullで初期化し、その後+=で文字列を足しています。
nullが入っている変数に+=で文字列を足すと、"null"という文字列が頭についてしまいます。
nullではなく空文字で初期化するか、最初の1回は+=ではなく=を使うようにしなければいけません。

[m.ts10806]

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

[osakana1990]

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

Answer 1

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

• Select

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

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

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

Comments

[osakana1990]

丁寧にご回答くださり誠にありがとうございます！
おっしゃる通り、innerHTMLの後にinitializationをすることで解決できました！

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

[m.ts10806]

消えているわけではなく、tabindexに-1が指定されて、display:noneで非表示にされているだけです。もう少しElementsの下のほうを見てください。
▼アイコンがsvgで、その下あたり。

あとは動かしながらElementsの変化を見てみてください。
細かいところはMaterializeの仕様なのでコードみていったほうがいいかもしれませんが、（私もしっかり見たわけではないですが）
liのクリックイベントで何を選択しているかも分かるので、そこと実際のselectのoptionのvalueと連動しているのではないかなと。

[osakana1990]

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

[m.ts10806]

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

Answer 2

違うような気もしますが

<script>
$(function(){
  $('#id_year option:eq(0)').prop('disabled',true);
  var y=new Date().getFullYear();
  for(var i=y;i>=1950;i--){
    $('#id_year').append($('<option>').val(i).text(i));
  }
});
</script>
<div class="input-field">
  <select id='id_year' required>
    <option value="" selected>選択してください</option>
  </select>
  <label>入社した年</label>
</div>

Comments

[osakana1990]

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