js兑现的年月日三级联动-JavaSript-爱易网页

js兑现的年月日三级联动

日期：2014-05-16　浏览次数：20326 次

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>

1 楼 weiweichen1985 2008-04-28

今天项目跨浏览器测试，发现存在兼容性问题。。。
改了下。。。OK了，支持4种浏览器（IE,FireFox,Netscape,Maxthon)

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js兑现的年月日三级联动

相关资料更多>

推荐阅读更多>