Realize three-level linkage of year, month and day based on JavaScript

This article shares the specific code for JavaScript to achieve three-level linkage of year, month and day for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Year, month, day three-level linkage</title>
</head>
<body onload="initYear(),initMonth()">
<select id="year"></select>year<select id="month" onchange="initDate()"></select>month<select id="date"></select>day<script>
    /**
     * Initialize year */
    function initYear() {
        //Get the current year let curYear = new Date().getFullYear();
        //Get the year list object let yearObj = document.getElementById("year");
        yearObj.options.add(new Option("---Please select year---", ""));
        for (let year = curYear; year > curYear - 100; year--) {
            let option = new Option(year, year);
            yearObj.options.add(option);
        }
    }

    /**
     * Initialize month */
    function initMonth() {
        //Get the year list object let monthObj = document.getElementById("month");
        monthObj.options.add(new Option("---Please select a month---", ""));
        for (let month = 1; month <= 12; month++) {
            let option = new Option(month, month);
            monthObj.options.add(option);
        }
    }

    /**
     * Initialization date */
    function initDate() {
        let dateObj = document.getElementById("date");
        //Get the selected month of the month let month = document.getElementById("month").value;
        //When the month is selected, the corresponding date will pop up dateObj.options.add(new Option("---Please select a date---", ""));
        //Convert month into a number month = parseInt(month);
        //Define the number of days per month let days = 31;
        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                days = 30;
                break;
            case 2:
                //Need to determine whether it is a leap year and get the currently selected year let year = document.getElementById("year").value;
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                    days = 29;
                } else {
                    days = 28;
                }
                break;
        }
        // Loop through the days obtained for (let i = 1; i <= days; i++) {
            let option = new Option(i, i);
            dateObj.options.add(option);
        }
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: