javascript实现日期三级联动下拉框选择菜单


Posted in Javascript onDecember 03, 2020

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示:

编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变;

然后自己改了一下代码:

<html>

<head>
 <meta charset="UTF-8"/>
 <meta name="viewport"
   content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
 <title>JS年月日三级联动下拉框日期选择代码</title>
</head>

<body>

<form name="reg_testdate">
 <select name="YYYY" onChange="YYYYDD(this.value)">
  <option value="">请选择 年</option>
 </select>
 <select name="MM" onChange="MMDD(this.value)">
  <option value="">选择 月</option>
 </select>
 <select name="DD" onChange="DDD(this.value)">
  <option value="">选择 日</option>
 </select>
</form>

<script language="JavaScript">
 var changeDD = 1;//->一个全局变量
 function YYYYMMDDstart() {
  MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  //先给年下拉框赋内容
  var y = new Date().getFullYear();
  for (var i = (y - 47); i < (y + 21); i++) //以今年为准,前30年,后30年
   document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
  //赋月份的下拉框
  for (var i = 1; i < 13; i++)
   document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
  document.reg_testdate.YYYY.value = y;
  document.reg_testdate.MM.value = new Date().getMonth() + 1;
  var n = MonHead[new Date().getMonth()];
  if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
  writeDay(n); //赋日期下拉框
  //->赋值给日,为当天日期
//  document.reg_testdate.DD.value = new Date().getDate();
 }
 if (document.attachEvent)
  window.attachEvent("onload", YYYYMMDDstart);
 else
  window.addEventListener('load', YYYYMMDDstart, false);

 function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
 {
  var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
  if (MMvalue == "") {
//   var e = document.reg_testdate.DD;
   optionsClear(e);
   return;
  }
  var n = MonHead[MMvalue - 1];
  if (MMvalue == 2 && IsPinYear(str)) n++;
  writeDay(n)
 }

 function MMDD(str) //月发生变化时日期联动
 {
  var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
  if (YYYYvalue == "") {
   var e = document.reg_testdate.DD;
   optionsClear(e);
   return;
  }
  var n = MonHead[str - 1];
  if (str == 2 && IsPinYear(YYYYvalue)) n++;
  writeDay(n)
 }

 function writeDay(n) //据条件写日期的下拉框
 {
  var e = document.reg_testdate.DD;
  optionsClear(e);
  for (var i = 1; i < (n + 1); i++)
  {
   e.options.add(new Option(" " + i + " 日", i));
   if(i == changeDD){
    e.options[i].selected = true; //->保持选中状态
   }
  }
  console.log(i);
  console.log(changeDD);
 }

 function IsPinYear(year) //判断是否闰平年
 {
  return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
 }

 function optionsClear(e) {
  e.options.length = 1;
 }
 //->随时监听日的改变
 function DDD(str){
  changeDD = str;
 }
</script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
vue最简单的前后端交互示例详解
Oct 11 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
微信小程序实战之自定义模态弹窗(8)
Apr 18 #Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 #Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 #Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 #Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 #Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 #Javascript
You might like
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
用js重建星际争霸
2006/12/22 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python 字符串池化的前提
2020/07/03 Python
Python os库常用操作代码汇总
2020/11/03 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
班组长竞聘书
2014/03/31 职场文书
读书月活动方案
2014/05/22 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python