1, 首先構建該JQuery教程實例中的index.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> <title>JQuery實例 - 生成年月日</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="calender.js"></script> </head> <body> <div align="center" style="margin-top:200px;"> <form name="form1" method="post" action=""> <select name="year"> </select>年 <select name="month"> </select>月 <select name="day"> </select>日 </form> </div> </body> </html>
2、Calender.js文件:
$('document').ready(function(){ /* * 生成級聯菜單 */ var i=1945; var date = new Date(); year = date.getFullYear();//獲取當前年份 var dropList; for(i;i<2012;i++){ if(i == year){ dropList = dropList + "<option value='"+i+"' selected>"+i+"</option>"; }else{ dropList = dropList + "<option value='"+i+"'>"+i+"</option>"; } } $('select[name=year]').html(dropList);//生成年份下拉菜單 var monthly; for(month=1;month<13;month++){ monthly = monthly + "<option value='"+month+"'>"+month+"</option>"; } $('select[name=month]').html(monthly);//生成月份下拉菜單 var dayly; for(day=1;day<=31;day++){ dayly = dayly + "<option value='"+day+"'>"+day+"</option>"; } $('select[name=day]').html(dayly);//生成天數下拉菜單 /* * 處理每個月有多少天---聯動 */ $('select[name=month]').change(function(){ var currentDay; var Flag = $('select[name=year]').val(); var currentMonth = $('select[name=month]').val(); switch(currentMonth){ case "1" : case "3" : case "5" : case "7" : case "8" : case "10" : case "12" :total = 31;break; case "4" : case "6" : case "9" : case "11" :total = 30;break; case "2" : if((Flag%4 == 0 && Flag%100 != 0) || Flag%400 == 0){ total = 29; }else{ total = 28; } default:break; } for(day=1;day <= total;day++){ currentDay = currentDay + "<option value='"+day+"'>"+day+"</option>"; } $('select[name=day]').html(currentDay);//生成日期下拉菜單 }) })
原文地址:http://www.phpfuns.com/scripts/jquery/jquery-calender-examples.shtml