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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
javascript各种复制代码收集
2008/09/20 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
JS实现简易计算器
2020/02/14 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python装饰器decorator介绍
2014/11/21 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
Android笔试题总结
2014/11/29 面试题
大学生收银员求职信分享
2014/01/02 职场文书
超市端午节活动方案
2014/01/23 职场文书
学校卫生检查制度
2014/02/03 职场文书
学校招生宣传广告词
2014/03/19 职场文书
新农村建设标语
2014/06/24 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
论文评审意见
2015/06/05 职场文书
python 模块重载的五种方法
2021/04/24 Python
go语言-在mac下brew升级golang
2021/04/25 Golang