js日期三级联动

js日期三级联动

	</select>年
	<select id="month" onchange="addDay()">
	</select>月
	<select id="day">
	</select>日		
	<script>
		//使用循环 动态的创建119个option标签
		for(var i=1900;i<=2019;i++)
		{
			//1.创建元素
			var option =  document.createElement("option");
			//2.为创建的option标签添加内容
			option.innerText = i;
			//3.将option标签添加到表示年份的选择框下面
				//3.1获取select标签
				var year = document.getElementById("year");
				//3.2添加到选择框下
				year.appendChild(option);
		}
		
		for(var i=1;i<=12;i++)
		{
			var option = document.createElement("option");
			option.innerText = i;
			var month = document.getElementById("month");
			month.appendChild(option);
		}
		
		//第一次加载时 调用添加天数的函数  添加默认天数
		addDay();
		function addDay()
		{
			var days = 0;
		
			//  跟据用户选择的年份和月份  得到days的数据
				//1.获取年份 并转为number类型
			var y = Number(document.getElementById("year").value);
			var m = Number(document.getElementById("month").value);
			
			//表示 2月份是否加一天 默认加0
			var run = 0;
			
			//判断闰年平年  确定2月份的天数
			if(y%400 == 0 || (y%4==0 && y%100 != 0))
			{
				
				run = 1;
			}
			
				//2.根据月份 得到天数
			switch(m)
			{
				case 1:days = 31;break;
				case 2:days = 28+run;break;
				case 3:days = 31;break;
				case 4:days = 30;break;
				case 5:days = 31;break;
				case 6:days = 30;break;
				case 7:days = 31;break;
				case 8:days = 31;break;
				case 9:days = 30;break;
				case 10:days = 31;break;
				case 11:days = 30;break;
				case 12:days = 31;break;			
			}
			
			
			//删除之前月份的天数:
			//父子节点   兄弟节点  祖先节点
			
			//先获取 day select 标签
			//var day = document.getElementById("day");				
			//获取天数对应的option标签
			//var chlids = day.childNodes;				
			//遍历数组 依次删除所有的字节点
			//for(var i=0;i<chlids.length;)
			//{
				//day.removeChild(chlids[i]);//删除字节点  必须使用父节点删除
			//}
			
			//第二种
			//先获取 day select 标签
			var day = document.getElementById("day");						
			// 使用删除day的第一个子节点  一直删下去  直到没有第一个子节点 
			 while(day.firstChild)// "3421" ""  NULL
			 {
			 	//用day元素 删除自己的第一个子节点
			 	day.removeChild( day.firstChild);
			 }
							
			
			for(var i=1;i<=days;i++)
			{
				var option = document.createElement("option");
				option.innerText = i;
				var day = document.getElementById("day");
				day.appendChild(option);
				
			}
			
		}
		
		
	</script>