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
