javaScript实现年月日的三级联动。
1 <html> 2 <head> 3 <title>Document</title> 4 </head> 5 <body> 6 <form name=form1> 7 <select name=YYYY onchange="YYYYMM(this.value)"> 8 <option value="">年</option> 9 </select> 10 <select name=MM onchange="MMDD(this.value)"> 11 <option value="">月</option> 12 </select> 13 <select name=DD> 14 <option value="">日</option> 15 </select> 16 </form> 17 18 </body> 19 <script language="JavaScript"> 20 21 //定义年、月、日方法函数 22 window.onload = function(){ 23 strYYYY = document.form1.YYYY.outerHTML; 24 strMM = document.form1.MM.outerHTML; 25 strDD = document.form1.DD.outerHTML; 26 MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 27 28 //先给年下拉框赋内容 29 var y = new Date().getFullYear(); 30 var str = strYYYY.substring(0, strYYYY.length - 9); 31 for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年 32 { 33 str += "<option value='" + i + "'> " + i + "</option> "; 34 } 35 document.form1.YYYY.outerHTML = str +"</select>"; 36 37 //赋月份的下拉框 38 var str = strMM.substring(0, strMM.length - 9); 39 for (var i = 1; i < 13; i++) 40 { 41 str += "<option value='" + i + "'> " + i + "</option> "; 42 } 43 document.form1.MM.outerHTML = str +"</select>"; 44 45 document.form1.YYYY.value = y; 46 document.form1.MM.value = new Date().getMonth() + 1; 47 var n = MonHead[new Date().getMonth()]; 48 if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; 49 writeDay(n); //赋日期下拉框 50 document.form1.DD.value = new Date().getDate(); 51 } 52 function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年) 53 { 54 var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; 55 if (MMvalue == ""){DD.outerHTML = strDD; return;} 56 var n = MonHead[MMvalue - 1]; 57 if (MMvalue ==2 && IsPinYear(str)) n++; 58 writeDay(n) 59 } 60 //月发生变化时日期联动 61 function MMDD(str) { 62 var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; 63 if (str == ""){DD.outerHTML = strDD; return;} 64 var n = MonHead[str - 1]; 65 if (str ==2 && IsPinYear(YYYYvalue)) n++; 66 writeDay(n) 67 } 68 //据条件写日期的下拉框 69 function writeDay(n) { 70 var s = strDD.substring(0, strDD.length - 9); 71 for (var i=1; i<(n+1); i++) 72 s += "<option value='" + i + "'> " + i + "</option> "; 73 document.form1.DD.outerHTML = s +"</select>"; 74 } 75 //判断是否闰平年 76 function IsPinYear(year){ 77 return(0 == year%4 && (year%100 !=0 || year%400 == 0)) 78 79 } 80 </script> 81 82 </html>