1. 程式人生 > >js實現的年月日三級聯動

js實現的年月日三級聯動

年預設載入到距離當前100年的年份,同時根據月份是否是閏年自動載入天數。。。

<table cellspacing="0" cellpadding="6" border="1">
<tr>
<td>
出生日期:
</td>
<td bgcolor="#FFFFFF" class="td_left">
<select name="year" onchange="getDates()">
<script language="javascript" type="text/javascript">





var date=new Date();
var year=date.getYear();
//載入距離當前年份100年的所有年份。。。
for(var i=year;i>=year-100;i--){
document.write("<option value="+i+">"+i+"</option>");
}

//建立option元素,並追加到指定select元素
function append(o,v){
var option=document.createElement("option");
option.value=v;
option.innerText=v;
o.appendChild(option);
}
//根據年月的值來載入日,判斷了月份是否是閏年。。。
function getDates(){

var y=document.getElementsByName("year")[0].value;
var m=document.getElementsByName("month")[0].value;

var day=document.getElementsByName("day")[0];
day.innerHTML="";

if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
for(var j=1;j<=31;j++){
append(day,j);
}
}
else if(m==4 || m==6 || m==9 || m==11){
for(var j=1;j<=30;j++){
append(day,j);
}
}
else if(m==2){
var flag=true;
flag=y%4==0&&y%100!=0||y%400==0;
if(flag){
for(var j=1;j<=29;j++){
append(day,j);
}
}
else{
for(var j=1;j<=28;j++){
append(day,j);
}
}
}

}
</script>
</select>

<select name="month" onchange="getDates()">
<script language="javascript" type="text/javascript">

for(var i=1;i<=12;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>

<select name="day">
<script language="javascript" type="text/javascript">

for(var i=1;i<=31;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>

</td>
</tr>
</table>