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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
Js组件的一些写法
Sep 10 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP session 会话处理函数
2016/06/06 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php-app开发接口加密详解
2018/04/18 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JavaScript代码复用模式实例分析
2012/12/02 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
Javascript浅谈之this
2013/12/17 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python中reader的next用法
2018/07/24 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python右对齐的实例方法
2020/07/05 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
十八大报告观后感
2014/01/28 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
医德医风自我评价
2014/09/19 职场文书
汇报材料怎么写
2014/12/30 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript