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中each循环的简单回滚操作
May 05 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
浅谈js中的闭包
2015/03/16 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python WSGI的深入理解
2018/08/01 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
销售心得体会
2014/01/02 职场文书
演讲稿怎么写
2014/01/07 职场文书
工作态度检讨书
2014/02/11 职场文书
幼儿园标语大全
2014/06/19 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
法院个人总结
2015/03/03 职场文书
学会感恩主题班会
2015/08/12 职场文书