javascript实现日期3级联动下拉框选择菜单
作者:雨中的鱼 发布时间:2023-10-19 02:15:34
标签:js,日期,下拉框
由于工作中涉及到生日编辑资料编辑,然后自己改了一下代码:
<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>
0
投稿
猜你喜欢
- 通过XML使系统之间的数据交换变得更简单,因为它与编程语言无关,刚引入XML的概念时,是通过一个脚本或应用程序解析XML数据,将其转换为适合
- ORACLE EBS操作某一个FORM界面,或者后台数据库操作某一个表时发现一直出于"假死"状态,可能是该表被某一用户锁
- 跨浏览器的本地存储(一):userData behaviorDOM Storage,是基于 Web Applications 1.0 spe
- 如何选择速度最快的站点? <html><head><meta http-equiv=&qu
- 在IE比较简单,大家都知道用setHomePage来设置,懒人写法:<a href="#setHomePage"
- 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题
- 这个可应用于所有浏览器中.<SCRIPT language=javascript>var leave=true; functio
- glob 文件名模式匹配,不用遍历整个目录判断每个文件是不是符合。1、通配符星号(*)匹配零个或多个字符import globf
- 做沙盒的时候遇到一个小问题——在IE9里面竟然抓不到事件的keyCode:element.addEventListener('key
- 之前有看过一个博文写的是白社会的设计很好但运营却有些遭,因为对每一个WebGame的推出时间把握不准,会有几个应用同时上线造成影响力的冲突,
- Go 程序的性能优化及 pprof 的使用程序的性能优化无非就是对程序占用资源的优化。对于服务器而言,最重要的两项资源莫过于 CPU 和内存
- 常见到网上博文有错误理论,包括身边很多朋友都曾认同“可访问性(Accessibility)是为残障人士准备”的观点。其实在互联网技术领域远不
- 晚上突然间看到大猫的头像在闪动,速度打开一看,发现他问,以前我写button标签的时候有没有写type属性,老实的我只有诚实地告诉他,我没写
- 数据的安全性策略: 数据的生考虑应基于数据的重要性。如果数据不是很重要,那么数据的安全性策略可以稍稍放松一些。然而,如果数据很重要,那么应该
- 导言在前面的教程我们看到了如何使用两个页面(一个主页,用于列出供应商; 一个明细页,用于显示选定供应商提供的产品)创建主/从报表 . 这种两
- 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下<!DOCTYPE html><htm
- 使用py时可能需要连续运行多条shell 命令1.# coding: UTF-8import sysreload(sys)sys.setde
- 本文实例讲述了PHP利用header跳转失效的解决方法,分享给大家供大家参考。具体方法分析如下:一、问题:今天header(\"L
- 看了大峡搞的级联菜单,我也班门弄斧一把,嘿嘿,花了一点时间搞了个级联菜单贴上来看看。本例中只要你选择成员分类名称就会自动显示成员名称:&nb
- 前后端分离的开发模式,原本觉得没什么稀奇的玩艺,在最近参与的一个大型项目中,让我有了更深的理解。前后端分离的开发模式:系统分析阶段,系分和前