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为某个div加入行样式
Jun 09 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
js实现分页功能
2017/05/24 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
JS删除对象中某一属性案例详解
2020/09/08 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python反射的用法实例分析
2018/02/11 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python中的 enumerate和zip详情
2022/05/30 Python