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 相关文章推荐
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
javascript if条件判断方法小结
May 17 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
八一建军节主持词
2015/07/01 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL