js年月日联动菜单

Posted 2020-06-20

<select name="year" onchange="YYYYDD(this.value)">
    <option value="">年</option>
</select> 
<select name="month" onchange="MMDD(this.value)">
    <option value="">月</option>
</select>
 <select name="day">
    <option value="">日</option>
</select>

function yyyyMMdd()
    {
        monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//每月天数的数组

        //给年下拉框赋内容
        var y   = new Date().getFullYear();//获得今年的年份
        for (var i = y; i > 1948; i--) //以今年为准，前30年，后30年
            document.registerForm.year.options.add(new Option(i,i));

        //给月份的下拉框赋内容
        for (var j = 1; j < 13; j++)
            document.registerForm.month.options.add(new Option(j, j));
    }
    if(document.attachEvent)
        window.attachEvent("onload", yyyyMMdd);
    else
        window.addEventListener("load", yyyyMMdd, false);
    
    function optionsClear(e)
    {
        e.options.length = 1;//使option的长度为1，即第一项下面的选项清空
    }
    
    function isLeapYear(year)//判断是否闰平年
    {  
        return(0 == year%4 && (year%100 !=0 || year%400 == 0));
    }
    
    function writeDay(n)  //据条件写日期的下拉框
    {
        var e = document.registerForm.day; 
        optionsClear(e);
        for (var i=1; i<(n+1); i++)
            e.options.add(new Option(i,i));
    }
    
    function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {   //str为月份
        var monthIndex=document.registerForm.month.selectedIndex;//月option的索引
        var monthValue = document.registerForm.month.options[monthIndex].value;
        if (monthValue == ""){ 
            var d = document.registerForm.day; //获取day的option
            oyptionsClear(d);// 
            return;
            }
        var m = monthDays[monthValue - 1];//让月份减1为[monthDays(每月天数)]这个数组的坐标就指向这个月底天数
        if (monthValue ==2 && isLeapYear(str)) m++;
            writeDay(m);
    }
    function MMDD(str)  //月发生变化时日期联动
    {   //str为月份
        var yearIndex=document.registerForm.year.selectedIndex;
        var yearValue = document.registerForm.year.options[yearIndex].value;
        if (yearValue == ""){ 
            var d = document.registerForm.day; 
            optionsClear(d); 
            return;
        }
        var m = monthDays[str - 1];
        if (str ==2 && isLeapYear(yearValue)) m++;
            writeDay(m);
    }