在客户端操作下拉列表框,实现年月日三级联动

<!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。

posted @ 2009-10-27 10:39  坐看风起  阅读(1126)  评论(0编辑  收藏  举报