日期的三级联动（纯js）

最新推荐文章于 2020-05-28 11:05:14 发布

choosezzz

最新推荐文章于 2020-05-28 11:05:14 发布

阅读量2k

点赞数 1

分类专栏： web前端文章标签： js 三级联动

本文链接：https://blog.csdn.net/dingse/article/details/78703002

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="UTF-8">
    <title>日期三级联动</title>
    <script>
        //网页加载时初始化年月
        window.οnlοad=function() {
            //初始的每月天数
            m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            //先给年下拉框赋内容
            for (var i =1970; i <2005; i++)
                document.form.year.options.add(new Option(i , i));
            //赋月份的下拉框
            for (var i = 1; i < 13; i++)
                document.form.month.options.add(new Option( i, i));
        }

        /**
         * 年份发生变化时进行联动
         * @param year
         */
        function yearChange(year)
        {
            //获得下拉列表中月份
            var month = document.form.month.options[document.form.month.selectedIndex].value;
            if (month == "0") {
                var opt = document.form.day;
                dayOptionsClear(opt);
                return;
            }
            if (month == 2 && IsPrimYear(str)) {
                m[month - 1]=29;
            }
            writeDay(m[str - 1]);
        }

        /**
         *根据月份的更改对天数列表联动
         */
        function monthChange(month)
        {
            //获得年份，selectedIndex当前被选择的下标
            var Y= document.form.year.options[document.form.year.selectedIndex].value;
            if (Y== "0") {
                var opt = document.form.day;
                dayOptionsClear(opt);
            }
            if (month == 2 && IsPrimYear(Y)){
                m[month - 1]=29;
            }
            writeDay(m[month - 1]);
        }

        /**
         * 根据参数（当月的天数）添加天数的下拉列表
         * @param day_number
         */
        function writeDay(day_number) {
            var opt = document.form.day;
            dayOptionsClear(opt);
            for (var i = 1; i < (day_number + 1); i++)
                opt.options.add(new Option(i, i));
        }

        /**
         * 判断是否为闰年
         * @param year
         * @returns {boolean}
         * @constructor
         */
        function IsPrimYear(year)
        {
            return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
        }

        //清空天数的下拉列表
        function dayOptionsClear(opt) {
            opt.options.length = 1;
        }
    </script>
</head>
<body>
    <form name="form">
        <select name="year" onChange="yearChange(this.value)">
            <option value="0" selected>-请选择-</option>
        </select>年
        <select name="month" onChange="monthChange(this.value)">
            <option value="0" selected>-请选择-</option>
        </select>日
        <select name="day">
            <option value="0" selected>-请选择-</option>
        </select>日
    </form>
</body>
</html>