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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- php 结果集转json(PHP的JSON封装、转变及输出操作示例)
- mysql服务器端安装步骤(windows下jsp+mysql网站环境配置方法)
- js时间日期处理
- js运算符使用教程(js中不常见的运算符与操作符总结)
- js柯里函数的应用场景(深入详解JS函数的柯里化)
- nodejs 内部模块代码(详解Node.js如何处理ES6模块)
- js常见面试题
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- JS实现金额大小写转换
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js实现分页
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- 《九牛之人降魔传》开机 演员祁高坤化身九牛之人除魔卫道(九牛之人降魔传开机)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
热门推荐
- 怎么用python实现链表(Python3实现的判断回文链表算法示例)
- extjs中treegrid
- navicatformysql使用视图(Navicat for MySQL的使用教程详解)
- JS函数前面感叹号的作用
- mysql如何给一个表批量添加字段(mysql从一张表查询批量数据并插入到另一表中的完整实例)
- php在没有命名空间之前是怎么调(php命名空间设计思想、用法与缺点分析)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- nginx启动报错连接失败(宝塔面板Nginx环境中出现404 Not Found的解决方法)
- 最简单python的100个代码(20条非常实用的Python代码实例)
- mysql日常运维(MySQL从库维护经验分享)