在客户端操作下拉列表框,实现年月日三级联动
<!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=gb2312" />
<title>年月日</title>
</head>
<body onload="Init()">
<form id="f1" name="f1" method="post" action="">
<table width="46%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="30%">年:
<select name="year" id="year" onchange="AddDays()">
</select>
</td>
<td width="28%">月:
<select name="month" id="month" onchange="AddDays()">
</select>
</td>
<td width="42%">日:
<select name="day" id="day">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
//添加年
function Init()
{
//清除下拉列表框中原有的内容
document.getElementById("year").length=0;
//通过循环为年的下拉列表框添加数值
for(var i=2000;i<2030;i++)
{
//创建一个下拉列表框的选项,其中两个参数表示value和text
var op=new Option(i,i);
document.getElementById("year").options[document.getElementById("year"
).length]=op;
}
AddMonth();
AddDays();
}
//添加月
function AddMonth()
{
document.getElementById("month").length=0;
for(var i=1;i<=12;i++)
{
var op=new Option(i,i);
document.getElementById("month").options[document.getElementById("mont
h").length]=op;
}
}
//判断平年闰年
function IsLeapYear(year)
{
if((year%4==0 && year %100!=0)||year%400==0)
{
return true;
}
return false;
}
//返回每个月的天数
function Days(year,month)
{
var arr=new Array(12);
arr=[31,29,31,30,31,30,31,31,30,31,30,31];
if(month!=2)
{
return arr[month-1];
}
if(IsLeapYear(year)==true)
{
return arr[month-1];
}
return arr[month-1]-1;
}
function AddDays()
{
document.getElementById("day").length=0;
//或取用户选择的年份
var
year=document.getElementById("year").options[document.getElementById("
year").selectedIndex].value;
//获取月份
var
month=document.getElementById("month").options[document.getElementById
("month").selectedIndex].value;
var days=Days(year,month);
for(var i=1;i<=days;i++)
{
var op=new Option(i,i);
document.getElementById("day").options[document.getElementById("day").
length]=op;
}
}
</script>
其中options是指下拉列表中选项的集合,Option是一个对象(类),表示一个项,有两个参数,一个为value,一个为text。