非常简单的javascript年-月-日三级联动下拉框

最新推荐文章于 2020-01-08 22:46:01 发布

cui55

最新推荐文章于 2020-01-08 22:46:01 发布

阅读量1.9k

点赞数

分类专栏： DHTML Javascript CSS 文章标签： javascript function date html

DHTML Javascript CSS 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<html>

　　<head>

　　<title>年月日三下拉框联动</title>

　　<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>

　　<meta name='author' content='oiea'>

　　

　　<script language="JavaScript">

　　    <!--

　　    function initDate(year,month,day)

　　    {

            //每个月的初始天数

　　        MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

　　        //当前的年份

　　        var y = new Date().getFullYear();

　　        //当前的月份

　　        var m = new Date().getMonth()+1; //javascript月份为0-11

　　        //但前的天份

　　        var d = new Date().getDate();

    　　    

            //以今年为准，向后2年，填充年份下拉框

　　        for (var i = y; i < (y+2); i++)

            {

　　            year.options.add(new Option(i,i));

            }

            //选中今年

            year.value=y;



　　        //填充月份下拉框

　　        for (var i = 1; i <= 12; i++)

            {

                month.options.add(new Option(i,i));

            }

            //选中当月

            month.value = m;

                

            //获得当月的初始化天数

            var n = MonDays[m-1];

            //如果为2月，天数加1

            if (m == 2 && isLeapYear(year.options[year.selectedIndex].value))

                  n++;

            //填充日期下拉框

            createDay(n,day); 

            //选中当日

            day.value = new Date().getDate();

　　    }



　　    function change(year,month,day) //年月变化，改变日

　　    {

　　         var y = year.options[year.selectedIndex].value;

    　　     var m = month.options[month.selectedIndex].value;

    　　     //if (m == "" ){  clearOptions(day); return;}

    　　     var n = MonDays[m - 1];

    　　     if ( m ==2 && isLeapYear(y))

    　　     {

    　　         n++;

    　　     }

    　　     createDay(n,day)

　　    }



    　

　　    function createDay(n,day) //填充日期下拉框

　　    {

　　        //清空下拉框

    　　     clearOptions(day);

    　　     //几天，就写入几项

    　　     for(var i=1; i<=n; i++)

    　　     {

    　　        day.options.add(new Option(i,i));

    　　     }

　　    }



        function clearOptions(ctl)//删除下拉框中的所有选项

　　    {

            for(var i=ctl.options.length-1; i>=0; i--)

            {

　　            ctl.remove(i);

　　        }

　　    }

    　　

　　    function isLeapYear(year)//判断是否闰年

　　    { 

　　        return( year%4==0 || (year%100 ==0 && year%400 == 0));

　　    }

　　    //-->

　　 </script>

　　</head>

　　<body οnlοad="initDate(document.form1.select_year,document.form1.select_month,document.form1.select_day)">

　　    <form name="form1">

            <select name="select_year" οnchange="change(this, document.form1.select_month, document.form1.select_day)"></select>year

            <select name="select_month" οnchange="change(document.form1.select_year, this,document.form1.select_day)"></select>month 

            <select name="select_day"></select>day

　　    </form>

　　</body>

　　</html>