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。