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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
深入分析jQuery.one() 函数
Jun 03 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
图片之间的切换
2006/06/26 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
vue实现自定义多选按钮
2020/07/16 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python备份Mysql脚本
2008/08/11 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
个人自我鉴定
2013/11/07 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android