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

所属分类: 网络编程 / JavaScript 阅读数: 241
收藏 0 赞 0 分享

本文实例讲述了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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

更多精彩内容其他人还在看

jQuery控制input只能输入数字和两位小数的方法

这篇文章主要介绍了jQuery控制input只能输入数字和两位小数的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue模板语法中数据绑定的实例代码

这篇文章主要介绍了Vue模板语法中数据绑定的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
收藏 0 赞 0 分享

详解 微信小程序开发框架(MINA)

小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。 这篇文章主要介绍了微信小程序开发框架(MINA),需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery实现的点击显示隐藏下拉菜单功能完整示例

这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

angular4应用中输入的最小值和最大值的方法

这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

150行代码带你实现微信小程序中的数据侦听

在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器,感兴趣的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

javascript异步编程的六种方式总结

这篇文章主要介绍了javascript异步编程的六种方式总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS实现的自定义map方法示例

这篇文章主要介绍了JS实现的自定义map方法,结合实例形式分析了javascript自定义map相关的json数组定义、遍历、添加、删除、读取等相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序云开发(数据库)详解

使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JS简单数组排序操作示例【sort方法】

这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多