年月日三级联动实现

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>
年月日三级联动实现

相关推荐
