JS实现年月日三级联动

所谓联动就是本身的改变受上下级元素影响，常见的多级联动运用在选择年月日，选择国家地区，购物筛选等等，本案例实现的是年月日的三级联动，原生js实现，效果如上图。

大多说多级联动数据都是来自后台数据库的多维数组或者本地数据表，道理大同小异，无外乎js判断上下级关系，获取子父索引关系。本例的年月日也是如此。

年和月好解决，不受谁影响，主要是每月天数受年月影响，闰年2月29天，平年29。1、3、5、7、8、10、12月31，4、6、9、11月30天，在下拉列表显示日之前先判断年月。

好，大体思路如此，看看主要代码：

---

 <form name=form1>
        <select name=YYYY onchange="YYYYMM(this.value)">
            <option value="">年</option>
        </select>
        <select name=MM onchange="MMDD(this.value)">
            <option value="">月</option>
        </select>
        <select name=DD>
            <option value="">日</option>
        </select>
        <span class="H"></span>
    </form>

---

重点的地方都有注释

           //定义每月最后一天数组
            LastDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            //年下拉框赋内容
            var y = new Date().getFullYear();
            var str = strYYYY.substring(0, strYYYY.length - 9);
            for (var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年
            {
                str += "<option value='" + i + "'> " + i + "</option>\r\n";
            }
            document.form1.YYYY.outerHTML = str + "</select>";
            document.form1.YYYY.value = y;

            //赋月份的下拉框

            //赋日期下拉框


        function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
        {
            var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
            var n = LastDay[MMvalue - 1];
            if (MMvalue == 2 && IsRun(str)) n++;
            writeDay(n)
        }

        function MMDD(str) //月发生变化时日期联动
        {
            var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
            var n = LastDay[str - 1];
            if (str == 2 && IsRun(YYYYvalue)) n++;
            writeDay(n)
        }

        function writeDay(n) //据条件写日期的下拉框
        {
            var s = strDD.substring(0, strDD.length - 9);
            for (var i = 1; i < (n + 1); i++)
                s += "<option value='" + i + "'> " + i + "</option>\r\n";
            document.form1.DD.outerHTML = s + "</select>";
        }

        function IsRun(year) //判断是否闰平年
        {
            return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0))
        }

最后，感谢阅读，细节代码移步GitHub。

转载于:https://www.cnblogs.com/zhenfei666/p/9357162.html