jQuery实现动态生成年月日级联下拉列表示例

本文实例讲述了jQuery实现动态生成年月日级联下拉列表。分享给大家供大家参考，具体如下

本文实例讲述了jQuery实现动态生成年月日级联下拉列表。分享给大家供大家参考，具体如下：

html代码：

<form name="form1" id="dateForm">
 <select name="year"></select>年
 <select name="month"></select>月
 <select name="day"></select>日
</form>

JS代码：

$(function(){
 var i=1945;
 var date=new Date();
 var year=date.getFullYear();//获取当前年份
 var dropList;
 for(var i;i<2017;i++){
 if(i==year){
 dropList=dropList+"<option value='"+i+"' selected>"+i+"</option>";
 }else {
 dropList=dropList+"<option value='"+i+"'>"+i+"</option>";
 }
 }
 $('#dateForm select[name=year]').html(dropList);//生成年份下拉列表
 var monthly;
 for(var j=1;j<13;j++){
 monthly=monthly+'<option value="'+j+'">'+j+'</option>'
 }
 $('#dateForm select[name=month]').html(monthly);//生成月份下拉列表
 var daily;
 for(var day=1;day<=31;day++){
 daily=daily+'<option value="'+day+'">'+day+'</option>';
 }
 $('#dateForm select[name=day]').html(daily);
 $('#dateForm select[name=month]').change(function(){
 var currentDay;
 var total;
 var flag=$('#dateForm select[name=year]:selected').val();
 var currentMonth=$('#dateForm 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":
 //闰年 整除4但是不整除100 或者整除400
 if( (flag%4==0 && flag%100!=0 ) || flag%400){
 total=29;
 }else {
 total=28;
 }
 default :break
 }
 for(day=1;day<=total;day++){
 currentDay=currentDay+'<option value="'+day+'">'+day+'</option>'
 }
 $('#dateForm select[name=day]').html(currentDay);//生成日期下拉列表
 });
});

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器： http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器： http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器： http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具： http://tools.jb51.net/code/unixtime