这篇文章将为大家详细讲解有关基于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>
关于“基于JavaScript如何实现年月日三级联动菜单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。