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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php与php MySQL 之间的关系
2009/07/17 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
laravel自定义分页效果
2017/07/23 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python3实现磁盘空间监控
2018/06/21 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
科技活动总结范文
2015/05/11 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js