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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery实现简单评论区功能
Oct 26 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
青年文明号事迹材料
2014/01/18 职场文书
财务部总监岗位职责
2014/03/12 职场文书
保护环境演讲稿
2014/05/10 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
vue实现在data里引入相对路径
2022/06/05 Vue.js