js三级联动列表(基于JavaScript实现年月日三级联动)
类别:编程学习 浏览量:1822
时间:2021-10-27 10:02:51 js三级联动列表
基于JavaScript实现年月日三级联动本文实例为大家分享了JavaScript实现年月日三级联动的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>年月日三级联动</title> </head> <body onload="initYear(),initMonth()"> <select id="year"></select>年 <select id="month" onchange="initDate()"></select>月 <select id="date"></select>日 <script> /** * 初始化年 */ function initYear() { //获得当前年份 let curYear = new Date().getFullYear(); //获得年列表对象 let yearObj = document.getElementById("year"); yearObj.options.add(new Option("---请选择年---", "")); for (let year = curYear; year > curYear - 100; year--) { let option = new Option(year, year); yearObj.options.add(option); } } /** * 初始化月份 */ function initMonth() { //获得年列表对象 let monthObj = document.getElementById("month"); monthObj.options.add(new Option("---请选择月份---", "")); for (let month = 1; month <= 12; month++) { let option = new Option(month, month); monthObj.options.add(option); } } /** * 初始化日 */ function initDate() { let dateObj = document.getElementById("date"); //获得当月选中月份 let month = document.getElementById("month").value; //当月份选择完毕,再弹出对应日期 dateObj.options.add(new Option("---请选择日期---", "")); //将month转化成数字 month = parseInt(month); //定义每月的天数 let days = 31; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: break; case 4: case 6: case 9: case 11: days = 30; break; case 2: //需要判断是否为闰年,获得当前选中的年 let year = document.getElementById("year").value; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { days = 29; } else { days = 28; } break; } //将得到的天数,循环输出 for (let i = 1; i <= days; i++) { let option = new Option(i, i); dateObj.options.add(option); } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js和php加密(RSA实现JS前端加密与PHP后端解密功能示例)
- asp.net后台输出js脚本
- js弹出框代码(js实现自动锁屏功能)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- js原生tab栏切换(JavaScript实现简易tab栏切换案例)
- Extjs updateProgress进度条的应用
- sqlserver常见函数(SQL Server之JSON 函数详解)
- js回调函数
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- extjs中treepanel属性和方法
- webmaven项目如何启动(js基础语法与maven项目配置教程案例)
- ExtJs中Store的种类
- 使用Console命令调试JS
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
- 越南新娘(越南新娘骗婚套路流程)
- 菲律宾游学(菲律宾游学中介机构)
热门推荐
- sqlserver字符串格式化(SQL server中字符串逗号分隔函数分享)
- php验证码思路(PHP实现字母数字混合验证码功能)
- ASP.NET函数返回多个值的几种方法
- react代码质量检查(react如何实现一个密码强度检测器详解)
- php 会话session实现用户登录功能(PHP cookie,session的使用与用户自动登录功能实现方法分析)
- css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- css3样式设计图片(CSS3 制作的彩虹按钮样式)
- 自动化播放声音(video实现有声音自动播放的实现方法)
- C#中Nullable<T>