JQuery教程实例-年月日的级联菜单
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
🐳 作者:dupeng0811 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
|