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事件(实例讲解)
Jul 18 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
做个自己站内搜索引擎
2006/10/09 PHP
PHP默认安装产生系统漏洞
2006/10/09 PHP
Access数据库导入Mysql的方法之一
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python二分法实现实例
2013/11/21 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python3字符串操作总结
2019/07/24 Python
python计算auc的方法
2020/09/09 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
教师先进个人材料
2014/12/17 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python