JavaScript ベースで年・月・日の 3 階層連携を実現

この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>年、月、日の 3 段階のリンク</title>
</head>
<body onload="initYear(),initMonth()">
<select id="year"></select>年<select id="month" onchange="initDate()"></select>月<select id="date"></select>日<script>
    /**
     * 年を初期化 */
    関数initYear() {
        //現在の年を取得します。let curYear = new Date().getFullYear();
        //年リストオブジェクトを取得します。let yearObj = document.getElementById("year");
        yearObj.options.add(new Option("---年を選択してください---", ""));
        (let year = curYear; year > curYear - 100; year--) {
            オプション = new Option(year, year);
            yearObj.options.add(オプション);
        }
    }

    /**
     * 月を初期化 */
    関数 initMonth() {
        //年リストオブジェクトを取得します。let monthObj = document.getElementById("month");
        monthObj.options.add(new Option("---月を選択してください---", ""));
        (月 = 1; 月 <= 12; 月++) {
            オプションを新しいオプション(月、月)とします。
            monthObj.options.add(オプション);
        }
    }

    /**
     * 初期化日 */
    関数initDate() {
        dateObj = document.getElementById("date"); とします。
        // 選択された月を取得します。let month = document.getElementById("month").value;
        //月を選択すると、対応する日付がポップアップ表示されます dateObj.options.add(new Option("---日付を選択してください---", ""));
        //月を数値に変換します month = parseInt(month);
        // 月あたりの日数を定義します。let days = 31;
        スイッチ（月）{
            ケース1:
            ケース3:
            ケース5:
            ケース7:
            ケース8:
            ケース10:
            ケース12:
                壊す;
            ケース4:
            ケース6:
            ケース9:
            ケース11:
                日数 = 30;
                壊す;
            ケース2:
                // うるう年かどうかを判定し、現在選択されている年を取得する必要があります。let year = document.getElementById("year").value;
                if (年 % 4 == 0 && 年 % 100 != 0 || 年 % 400 == 0) {
                    日数 = 29;
                } それ以外 {
                    日数 = 28;
                }
                壊す;
        }
        // 取得した日数をループする for (let i = 1; i <= days; i++) {
            オプションを新しいオプション(i, i)とします。
            dateObj.options.add(オプション);
        }
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: