javascript实现日期3级联动下拉框选择菜单
作者:雨中的鱼 时间:2023-10-19 02:15:34
由于工作中涉及到生日编辑资料编辑,然后自己改了一下代码:
<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>
标签:js,日期,下拉框
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
OpenCV模板匹配matchTemplate的实现
2021-08-09 15:51:51
![](https://img.aspxhome.com/file/2023/3/112423_0s.jpg)
jQuery中ajax和post处理json的不同示例对比
2024-04-16 08:54:10
特征脸(Eigenface)理论基础之PCA主成分分析法
2023-03-03 07:19:33
![](https://img.aspxhome.com/file/2023/2/134432_0s.png)
sql server vs10安装之后一些列问题
2012-01-05 19:22:41
视觉设计的一致性与用户体验
2010-01-06 13:38:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/same_paper-95s.jpg)
SQL 查询连续登录的用户情况
2024-01-29 01:27:18
![](https://img.aspxhome.com/file/2023/0/104110_0s.png)
Windows下MySQL8.0.18安装教程(图解)
2024-01-24 13:14:59
![](https://img.aspxhome.com/file/2023/2/115312_0s.jpg)
Vue 实现穿梭框功能的详细代码
2024-05-09 10:51:53
![](https://img.aspxhome.com/file/2023/8/126588_0s.gif)
MySQL 整表加密解决方案 keyring_file详解
2024-01-18 07:50:31
Python时间操作之pytz模块使用详解
2023-05-10 02:57:17
![](https://img.aspxhome.com/file/2023/9/86579_0s.png)
表格头固定而列可滚动的效果
2020-08-11 21:28:41
使用mss2sql工具将SqlServer转换为Mysql全记录
2024-01-24 11:59:37
![](https://img.aspxhome.com/file/2023/5/121305_0s.png)
通过vue提供的keep-alive减少对服务器的请求次数
2024-05-28 16:10:40
Mysql数据库之Binlog日志使用总结(必看篇)
2024-01-20 20:15:16
不成熟的标准化是我们唯一惧怕的
2008-08-15 18:55:00
python中_del_还原数据的方法
2022-07-28 18:49:14
Python 多线程超详细到位总结
2021-02-17 04:10:58
vue实现滑动验证条
2024-04-30 10:29:14
![](https://img.aspxhome.com/file/2023/5/130175_0s.jpg)
Django博客系统注册之创建用户模块应用
2021-08-06 15:15:20
![](https://img.aspxhome.com/file/2023/0/97680_0s.png)
在Windows系统上安装Cygwin搭建Swoole测试环境的图文教程
2022-11-13 21:19:34
![](https://img.aspxhome.com/file/2023/6/114686_0s.png)