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 animate 动画效果使用说明
Nov 04 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 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语句的实现代码
2011/06/24 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
用js实现放大镜效果
2020/10/28 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python线程创建和终止实例代码
2018/01/20 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
超市业务员岗位职责
2013/12/05 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
条幅标语大全
2014/06/20 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
优秀党员事迹材料
2014/12/18 职场文书
工作检讨书范文
2015/01/23 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript