三级联动下拉框
最近写东西需要用到，就写下来记录一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>年月日三级联动下拉框</title>
</head>
<body>
<h4>请选择年月日</h4>
<select id="year" onChange="changeYear(this)"></select> -
<select id="month" onChange="changeMonth(this)"></select> -
<select id="date"></select>
<br><br>
</body>
<script>
var year = getValue("year");
var month = getValue("month");
var date = getValue("date");
var D = new Date();
var yy = parseInt(D.getFullYear()); //年
var mm = D.getMonth()+1; //月
var dd = parseInt(D.getDate()); //日
var oldYY = yy-150; //设置最老年份
var bigYY = new Array('1','3','5','7','8','10','12'); //列出大月的年份
var allDD; //初始化每月天数
creatYear(); //开始生成年下拉列表
creatMonth(); //开始生成月下拉列表
creatDate(yy,mm); //开始生成日下拉列表
//通过id获取值的函数
function getValue(id){
var value=document.getElementById(id);
return value;
}
//生成年下拉列表
function creatYear(){
//初始化
var pyy = document.createElement('option');
pyy.innerText='选择 年';
pyy.value=0;
year.appendChild(pyy);
//循环所有年份
for(i=yy;i>=oldYY;i--){
pyy = document.createElement('option');
pyy.innerText=i+' 年';
pyy.value=i;
year.appendChild(pyy);
}
}
//生成月下拉列表
function creatMonth(){
//初始化
var pmm = document.createElement('option');
pmm.innerText='选择 月';
pmm.value=0;
month.appendChild(pmm);
//判断是否选择了年
if(year.selectedOptions[0].value==0)
return;
//循环所有月份
for(i=1;i<=12;i++){
pmm=document.createElement('option');
pmm.innerText=i+' 月'
pmm.value = i;
month.appendChild(pmm);
}
}
//生成日下拉列表
function creatDate(yy,mm){
//初始化
var pdd = document.createElement('option');
pdd.innerText='选择 日';
pdd.value=0;
date.appendChild(pdd);
//判断是否选择了月
if(month.selectedOptions[0].value==0)
return;
var day = isAdd(yy,mm);
//循环所有日期
for(i=1;i<=day;i++){
pdd=document.createElement('option');
pdd.innerText=i+' 日'
pdd.value = i;
date.appendChild(pdd);
}
}
//判断并产生改月的天数
function isAdd(yy,mm){
if(bigYY.indexOf(mm)!=-1)
allDD=31;
else{
allDD=30;
if(2==mm &&((yy%4==0&&yy%100!=0)||yy%400==0))
allDD=29;
else if(2==mm &&((yy%4!=0&&yy%100==0)||yy%400!=0))
allDD=28;
}
return allDD;
}
//年份改变时调用
function changeYear(obj){
month.innerHTML = null;
date.innerHTML = null;
var yy = obj.selectedOptions[0].value;
creatMonth();
creatDate(yy,mm);
}
//月份改变时调用
function changeMonth(obj){
date.innerHTML = null;
var yy = year.selectedOptions[0].value;
var mm = obj.selectedOptions[0].value;
creatDate(yy,mm);
}
</script>
</html>
