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网页加载进度条的实现
Jun 01 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现穿梭框效果
Jan 19 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python实现代码统计工具
2019/09/19 Python
基于matplotlib xticks用法详解
2020/04/16 Python
浅析python中的del用法
2020/09/02 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
南京某公司笔试题
2013/01/27 面试题
年终总结会议主持词
2014/03/17 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书