JavaScript练习——年、月、日级联查询
HTML:
<!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=gb2312" /> <title>无标题文档</title> </head> <body> <select id="selYear" onchange="OnChangYear()"><option>--请选择--</option></select>年 <select id="selMonth" onchange="OnChangeMonth()"><option>--请选择--</option></select>月 <select id="selDay"><option>--请选择--</option></select> </body> </html>
JavaScript：
<script type="text/javascript">
var yearObj = document.getElementById("selYear");
var monthObj = document.getElementById("selMonth");
var dayObj = document.getElementById("selDay");
var yearList = new Array(2000, 2009, 2010, 2011, 2012, 2013, 2014, 2015);
var monthList = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
var dayList = new Array();
dayList[-1] = [];
dayList[0] = ['29', '30', '31'];
dayList[1] = ['29'];
dayList[2] = ['29', '30'];
dayList[3] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28'];
var option;
for (var y in yearList) {
option = new Option(yearList[y], yearList[y]);
yearObj.options.add(option);
}
function OnChangYear() {
monthObj.options.length = 1;
dayObj.options.length = 1;
if (yearObj.selectedIndex != 0) {
for (var m in monthList) {
option = new Option(monthList[m], monthList[m]);
monthObj.options.add(option);
}
}
}
function OnChangeMonth() {
dayObj.options.length = 1;
var year = yearObj.value; //获取用户选择的年份
var month = monthObj.selectedIndex; //获取用户选择的月份
if (monthObj.selectedIndex != 0) {
for (var d in dayList[3]) {
option = new Option(dayList[3][d], dayList[3][d]);
dayObj.options.add(option);
}
if (month == 2) {
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
} else {
for (var d in dayList[1]) {
option = new Option(dayList[1][d], dayList[1][d]);
dayObj.options.add(option);
}
}
} else {
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
for (var d in dayList[0]) {
option = new Option(dayList[0][d], dayList[0][d]);
dayObj.options.add(option);
}
break;
case 4:
case 6:
case 9:
case 11:
for (var d in dayList[2]) {
option = new Option(dayList[2][d], dayList[2][d]);
dayObj.options.add(option);
}
break;
}
}
}
}
</script>