您的位置：首页 > 其它
年月日三级下拉列表

2016-10-21 21:54 85 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 下拉列表
相关文章推荐
新的分享
章节导航