年月日三级下拉列表

最新推荐文章于 2019-04-04 11:21:58 发布

学习急先锋

最新推荐文章于 2019-04-04 11:21:58 发布

阅读量1.1k

点赞数 2

分类专栏： js 文章标签：下拉列表

本文链接：https://blog.csdn.net/myvanguard/article/details/52887446

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;" />
<meta name="keywords" content="年月日三级下拉列表js" />
<title>年月日三级下拉列表</title>
<script type="text/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();　    
            //以今年为准，向后50年，填充年份下拉框
　　        for (var i = y; i >(y-50); 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) //年月变化，改变日                                  当鼠标点击select时触发onclick事件从而调用此函数，
　　    {
　　         var y = year.options[year.selectedIndex].value;                      //由于传递参数的是调用的this指针，
    　　     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 || (year0 ==0 && year%400 == 0));
　　    }
function onload() 
{ 
initDate(document.form1.select_year,document.form1.select_month,document.form1.select_day);//初始化出生日期下拉菜单内容
}
//-->
</script>
</head>
<body onload="onload()" style="text-align:center">
<h2>年月日三级下拉列表js实例</h2>
<form name="form1">
<select name="select_year" onchange="change(this, document.form1.select_month, document.form1.select_day)"></select>年
<select name="select_month" onchange="change(document.form1.select_year, this,document.form1.select_day)"></select>月 
<select name="select_day"></select>日
</form>
</body>
</html>

学习急先锋

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
年月日三级下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty
复制链接

扫一扫