虽然春天的劲风,着实让我不太喜欢,但不得不说,春天是个好季节,俗话说 "一年之际在于春 ",春天是一年的开始,也是让人充满希望和幻想的季节。刚刚历经了寒冬的人们,开始在春天慢慢苏醒,他们慢慢的重拾自己的梦想,渐渐骨起斗志,一步步朝着自己的梦想出发,一点点靠近理想的终端。
本文实例讲述了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.haodaima.com/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器:
http://tools.haodaima.com/jisuanqi/datecalc
在线日期天数差计算器:
http://tools.haodaima.com/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具:
http://tools.haodaima.com/code/unixtime
希望本文所述对大家jQuery程序设计有所帮助。
本文jQuery实现动态生成年月日级联下拉列表示例到此结束。懂得感恩,是收获幸福的源泉。懂得感恩,你会发现原来自我周围的一切都是那样的完美。小编再次感谢大家对我们的支持!