日付プルダウン処理（他のやり方）について

Question

お世話になっております。
以前の日付プルダウン処理(リンク内容)に関してです。

おかげさまで、完成させることができました！ありがとうございます。
やり方としては、onloadの時だけ年のメソッドの中の最後に、月のメソッドを呼び出す際に
引数を渡す、というものになりました。（※日も同様）
onchangeの時には何も引数を渡さない、ということです。

一応できたのは良いのですが、これだと保守性・拡張性、メソッドの独立性に欠けると思いまして、
このたび質問させていただきました。

今回やろうとしているやり方は、onload時、onchange時どちらもプルダウンを生成するには
変わりありませんが、onload時にだけ、現在の年月日を設定するメソッドを使用する、という
ものです。

一応作ってはみたのですが、★の部分で渡す1つめの引数で詰まってしまっています。。。
おそらくDOM要素の読み込みタイミングの問題なのだと思います。
（プルダウンを作るメソッドは前回の質問と同じなので省略させていただきます。すみません。）

このやり方・方向性は間違っているのでしょうか？
申し訳ありませんが、よろしくお願いします。

// 現在年
var NowYear = (new Date()).getFullYear();

// 現在月
var NowMonth = (new Date()).getMonth() + 1;

// 現在日
var NowDate = (new Date()).getDate();

window.onload = function() {
	setSelectYear();
	
	//★
	setToday(document.getElementById("selectYear"),NowYear);
	setToday(document.getElementById("selectMonth"),NowMonth);
	setToday(document.getElementById("selectDate"),NowDate);
}

/*
 * onload時に、今日の日付(年月日)にセットするメソッド
 */
function setToday(option, Now) {
	for(i = 0; i < option.length(); i++){

		if(i = Now){
			option.selected = (Now);
			break;
		}
	}
}

/*
 * 年のoptionを更新
 */
function setSelectYear() {

	// selectボックスIDからElementの取得
	var selectElement = document.getElementById("selectYear");

	// 現在～5年前分まで回す
	for (var y = NowYear; y >= NowYear - 5; y--) {

		// <option>要素を追加
		var option = document.createElement("option");

		// optionのvalue属性を設定
		option.value = y;

		// リストに表示するテキストの設定
		option.text = y;

		// セレクトボックスにオプションを追加
		selectElement.appendChild(option);
	}
	setSelectMonth();
}

/*
 * 月のoptionを更新
 */
function setSelectMonth() {

	// selectボックスIDからElementの取得
	var selectElement = document.getElementById("selectMonth");

	// 要素削除用
	var child;

	while (child = selectElement.firstChild) {
		selectElement.removeChild(child);
	}

	// 12ヶ月分回す
	for (var m = 1; m <= 12; m++) {

		// <option>要素を追加
		var option = document.createElement("option");

		// optionのvalue属性を設定
		option.value = m;

		// リストに表示するテキストの設定
		option.text = m;

		// セレクトボックスにオプションを追加
		selectElement.appendChild(option);

		// 現在の日を引数に渡さないsetSelectDateを実行
		setSelectDate();
	}
}

/*
 * 日のoptionを更新
 */
function setSelectDate() {

	// 選択された年を取得
	var y = document.form1.selectYear.options[document.form1.selectYear.selectedIndex].value;

	// 選択された月を取得
	var m = document.form1.selectMonth.options[document.form1.selectMonth.selectedIndex].value;

	// 閏年なら
	if (m == 2 && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) {

		// 2月の閏年
		var last = 29;

		// それ以外なら
	} else {
		var lastday = new Array(11);
		lastday = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
		last = lastday[m - 1];
	}

	// 要素取得と初期化
	var selectElement = document.getElementById("selectDate");

	// 要素削除用
	var child;

	// セレクトボックスの子要素を取得しつつループ
	while (child = selectElement.firstChild) {

		// セレクトボックスから子要素を削除
		selectElement.removeChild(child);
	}

	// 1日から月の最終日まで回す
	for (var d = 1; d <= last; d++) {

		// <option>要素を追加
		var option = document.createElement("option");

		// optionのvalue属性を設定
		option.value = d;

		// リストに表示するテキストの設定
		option.text = d;

		// セレクトボックスにオプションを追加
		selectElement.appendChild(option);
	}
}

<FORM id = "form1">
<td><select name="year" id="selectYear" onchange="setSelectMonth()">
</select> 年
<select name="month" id="selectMonth" onchange="setSelectDate()">
</select> 月
<select name="date" id="selectDate">
</select> 日</td>
</FORM>

Comments

[m.ts10806]

URLはリンクをつけることができるのでリンク対応されたほうが回答する側としては助かります。

[m.ts10806]

また前回質問が関係しているとはいえ、この質問だけでも完結できるように余程コードが長くないのであれば提示されたほうがいいかもしれません。

[m.ts10806]

DOM要素の読み込みタイミングのことを気にされていますが、このJavaScriptはどの位置に置かれているのでしょうか。html上で示していただければと。

[sky.user.]

ご回答ありがとうございます。JavaScriptの外部ファイルとしているので、HTML上ではありません。

[m.ts10806]

失礼、表現が悪かったですね。読み込み記述の位置です。あと気になるのがhtmlが中途半端に提示されているので全体がわからないところですね。tdの中にある・・・ということですが複数selectがあったりしませんよね？tdなくても再現可能であれば余計な詮索を強いるのでselectだけ置いてあったほうが良いように思います。

[m.ts10806]

このコード、そもそもエラー出てますが、そこは認識済みですか？それとも何か記述が抜けていたりするのでしょうか。

[m.ts10806]

あ、name=form1でformタグ設置しなきゃいけないみたいですね。了解です。質問はその次のエラー解決となりそうですね。

Answer 1

optionの数をとるなら .options.length ですね。
ただ、これだけでも解決しません。
なぜならsetToday()で回しているiはあくまでoptionの数だけしか回しません。
optionのバリューはそれぞれの年月日がそのまま入っています。
Nowには年月日がそれぞれ渡されます。

つまり「デフォルト本日」としたいのであれば、このやり方ではできませんので、
「optionのvalueを見て同じかどうか」とする必要があります。

function setToday(select, Now) {
    for(var i = 0; i < select.options.length; i++){
        if(select.options[i].value == Now){
            select.options[i].selected = true;
            break;
        }
    }
}

※selectedは論理型であるため実値ではなくtrue/falseで行います。

参考：

• option要素のtext部分をみてselect要素の値をJavascriptから変更する方法について

Comments

[sky.user.]

ありがとうございます！無事改善できました。
JavaScriptはまだ詳しくなく、変数に型がないと聞いていたので、true/falseもないものなのだと
思い込んでおりました。。。
貼ってくださったJavaScriptの仕様を読んで勉強します。

[m.ts10806]

解決されたようで何よりです。
私が「型」と書いたのはselectのoptionのオブジェクトのプロパティのことです。
そこはリンク先のドキュメントを確認して、関係ありそうな機能のページも読んでみて理解を深めてください。