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>