JQuery实现日期联动
实现目标: 两个日期,有下拉框: < head > //导入jquery地址 < script src ="(Jquery地址)" language ="JavaScript" type ="text/javascript" ></ script > < script type ="text/javascript" > // startYear发生变化 function changeYear(str,isstart) { var pre = " start " ; if (isstart == false ) { pre = " end " ; } var startMonth = $(pre + " Month " ).value; if (startMonth == "" ) { var e = $(pre + " Month " ); optionClear(e); return ; } var n = MonHead[startMonth - 1 ]; if (startMonth == 2 && IsPinYear($(pre + " Year " ).value)) { n ++ ; } writeDay(n,pre); } function changeMonth(str,isstart) { var pre = " start " ; if (isstart == false ) { pre = " end " ; } var year = $(pre + " Year " ).value; if (year == "" ) { var e = $(pre + " Day " ); optionClear(e); return ; } var n = MonHead[str - 1 ]; if (str == 2 && IsPinYear($(pre + " Year " ))) { n ++ ; } writeDay(n,pre); } function dateStart() { var defaultStartY = " 2011 " ; var defaultStartM = " 1 " ; var defaultStartD = " 14 " ; var defaultEndY = " 2011 " ; var defaultEndM = " 2 " ; var defaultEndD = " 23 " ; MonHead = [ 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 ]; var prestr = new Array( " start " , " end " ); for ( var j = 0 ; j < 2 ; j ++ ) { var pre = prestr[j]; // start 年 var y = new Date().getFullYear(); if (pre == " start " ) { // start初始选中前第10天 var i_index = 0 ; for ( var i = (y - 10 ); i <= y; i ++ ) { $(pre + " Year " ).options.add( new Option( "" + i + "" ,i)); if (i == defaultStartY) { $(pre + " Year " ).options[i_index].selected = true ; } i_index ++ ; } } else { var i_index = 0 ; for ( var i = (y - 5 ); i <= y + 5 ; i ++ ) { $(pre + " Year " ).options.add( new Option( "" + i + "" ,i)); if (i == defaultEndY) { $(pre + " Year " ).options[i_index].selected = true ; } i_index ++ ; } } // start月 defaultM = (pre == " start " ? defaultStartM : defaultEndM) for ( var i = 1 ; i < 13 ; i ++ ) { $(pre + " Month " ).options.add( new Option( "" + i + "" ,i)); if (i == defaultM) { $(pre + " Month " ).options[i - 1 ].selected = true ; } } // start日 var n = MonHead[$(pre + " Month " ).value]; if ( new Date().getMonth == 1 && IsPinYear($(pre + " Year " ).value)) { n ++ ; } defaultD = (pre == " start " ? defaultStartD : defaultEndD) writeDay(n,pre); $(pre + " Day " ).options[defaultD - 1 ].selected = true ; } } function writeDay(n,pre) { var e = $(pre + " Day " ); optionClear(e); for ( var i = 1 ; i < (n + 1 ); i ++ ) { e.options.add( new Option( "" + i + "" ,i)); } } function IsPinYear(year) { return ( 0 == year % 4 && (year % 100 != 0 || year % 4 == 0 )); } function optionClear(e) { for ( var i = e.options.length; i >= 0 ; i -- ) { e.remove(i); } } </ script > </ head > < body onload ="dateStart()" > < p name ="selectdate" > 从 < select id ="startYear" name ="startYear" onchange ="changeYear(this.value,true)" > </ select > 年 < select id ="startMonth" name ="startMonth" onchange ="changeMonth(this.value,true)" > </ select > 月 < select id ="startDay" name ="startDay" > </ select > 日 到 < select id ="endYear" name ="endYear" onchange ="changeYear(this.value,false)" > </ select > 年 < select id ="endMonth" name ="endMonth" onchange ="changeMonth(this.value,false)" > </ select > 月 < select id ="endDay" name ="endDay" > </ select > 日 </ p > </ body > 参考了一些代码,终于能实现了~~ 本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/archive/2011/02/23/1962586.html,如需转载请自行联系原作者