weiweichen1985

永久域名 http://weiweichen1985.javaeye.com

2008-04-25

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>

ymd.rar (762 Bytes)
描述:
下载次数: 23

09:52
浏览 (66)
评论 (1)
分类: javascript
进入论坛
相关推荐

<!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=gbk" />
</head>
<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.getFullYear();
		  
		  for(var i=year;i>=year-100;i--){
		  	     document.write("<option value="+i+">"+i+"</option>");
		  }
		  
		  
		  function  append(o,v){
		  	  //var option=document.createElement("option");
			  //option.value=v;
			  //option.innerText=v;
			  var option=new Option(v,v);
			  //o.appendChild(option);
			  o.options.add(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>
</html>