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

最新推荐文章于 2024-06-18 13:09:27 发布

ak479471

最新推荐文章于 2024-06-18 13:09:27 发布

阅读量90

点赞数

分类专栏：编程心得文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/ak479471/article/details/83401717

版权

编程心得专栏收录该内容

9 篇文章 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>

ak479471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非常简单的javascript年-月-日三级联动下拉框

&lt;html&gt;　　&lt;head&gt;　　&lt;title&gt;年月日三下拉框联动&lt;/title&gt;　　&lt;meta http-equiv='Content-Type' content='text/html; charset=gb2312'&gt;　　&lt;meta name='author' content='oiea'&gt;　　　　&...
复制链接

扫一扫