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


Posted in jQuery onMay 11, 2019

本文实例讲述了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);//生成日期下拉列表
  });
});
jQuery 相关文章推荐
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php使用百度翻译api示例分享
2014/01/31 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php微信支付接口开发程序
2016/08/02 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python自动扫雷实现方法
2015/07/25 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
业务部主管岗位职责
2014/01/29 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2015年司机工作总结
2015/04/23 职场文书
银行求职信怎么写
2019/06/20 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Python天气语音播报小助手
2021/09/25 Python