纯JS如何实现年月日的三级联动

最新推荐文章于 2022-06-11 23:26:31 发布
最新推荐文章于 2022-06-11 23:26:31 发布
阅读量425 收藏
点赞数
分类专栏： js 文章标签： js
原文链接：http://www.pinlue.com/article/2018/11/2707/037673948110.html
版权

转载自品略图书馆  http://www.pinlue.com/article/2018/11/2707/037673948110.html

 

<html>

<head>

<title>年月日三下拉框联动</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>

<form name=form1>

<select name=YYYY οnchange="YYYYMM(this.value)">

<option value="">年</option>

</select>

<select name=MM οnchange="MMDD(this.value)">

<option value="">月</option>

</select>

<select name=DD>

<option value="">日</option>

</select>

</form>

<script language="JavaScript"><!--

function window.onload()

{

strYYYY = document.form1.YYYY.outerHTML;

strMM = document.form1.MM.outerHTML;

strDD = document.form1.DD.outerHTML;

MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//先给年下拉框赋内容

var y = new Date().getFullYear();

var str = strYYYY.substring(0, strYYYY.length - 9);

for (var i = (y); i < (y+30); i++) //以今年为准，后30年

{

str += "<option value="" + i + ""> " + i + "</option>\r\n";

}

document.form1.YYYY.outerHTML = str +"</select>";

//赋月份的下拉框

var str = strMM.substring(0, strMM.length - 9);

for (var i = 1; i < 13; i++)

{

str += "<option value="" + i + ""> " + i + "</option>\r\n";

}

document.form1.MM.outerHTML = str +"</select>";

document.form1.YYYY.value = y;

document.form1.MM.value = new Date().getMonth() + 1;

var n = MonHead[new Date().getMonth()];

if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;

writeDay(n); //赋日期下拉框

document.form1.DD.value = new Date().getDate();

}

function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)

{

var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;

if (MMvalue == ""){DD.outerHTML = strDD; return;}

var n = MonHead[MMvalue - 1];

if (MMvalue ==2 && IsPinYear(str)) n++;

writeDay(n)

}

function MMDD(str) //月发生变化时日期联动

{

var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;

if (str == ""){DD.outerHTML = strDD; return;}

var n = MonHead[str - 1];

if (str ==2 && IsPinYear(YYYYvalue)) n++;

writeDay(n)

}

function writeDay(n) //据条件写日期的下拉框

{

var s = strDD.substring(0, strDD.length - 9);

for (var i=1; i<(n+1); i++)

s += "<option value="" + i + ""> " + i + "</option>\r\n";

document.form1.DD.outerHTML = s +"</select>";

}

function IsPinYear(year)//判断是否闰平年

{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}

//--></script>

</body>

</html>

銨靜菂等芐紶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript 实现的年月日三级联动
03-18
NULL 博文链接：https://zhouxianglh.iteye.com/blog/678531
JS 实现的年月日三级联动
weixin_30345577的博客
01-09 262
js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 AYN=5;//年份范围往后0年 function YMDselect(){ this.SelY=document.getElementsByName(arguments[0])[0]; this.SelM=document.getElement...
JS实现年月日三级联动
weixin_30707875的博客
07-21 560
所谓联动就是本身的改变受上下级元素影响，常见的多级联动运用在选择年月日，选择国家地区，购物筛选等等，本案例实现的是年月日的三级联动，原生js实现，效果如上图。 大多说多级联动数据都是来自后台数据库的多维数组或者本地数据表，道理大同小异，无外乎js判断上下级关系，获取子父索引关系。本例的年月日也是如此。 年和月好解决，不受谁影响，主要是每月天数受年月影响，闰...
js实现三级联动-年月日
秋叶为何落
11-13 4334
三级联动-年月日 var year=new Date().getFullYear();//在 FF等浏览器内getYear()返回的是 "当前年份-1900" 的值 for(var i = year - 30;i <= year + 30; i++){ document.write("" + i + "");
js实现年月日三级联动
weixin_30284355的博客
05-31 255
当我们注册一个qq的时候，会看到一个三级年月日的联动菜单，下面简单介绍。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta ...
js实现年月日表单三级联动
10-20
本文将详细讲解如何使用JavaScript实现年月日表单的三级联动，以生日栏为例。 1. **HTML结构**： 首先，我们需要在HTML中定义三个`<select>`元素，分别代表年、月、日，并为每个`<select>`设置唯一的ID，如`sel1`...
前端年月日三级联动用到的js文件data.zip
04-21
"前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...
JS年月日三级联动下拉框日期选择特效代码
03-20
"JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式，它通过JavaScript（JS）来创建一个包含年、月、日的三级下拉菜单，用户可以逐级选择，形成一个完整的日期。这种设计既简洁又直观，特别适用于那些...
JavaScript实现年月日三级联动
an_gentle_killer的博客
06-16 453
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>年月日三级联动</title> </head> <body onload="initYear(),initMonth()"> <select id="year"></select>年 <select id="month" onc.
jquery实现日期年月日三级联动插件
07-17
自写的jquery日期年月日三级联动插件，效果很好用，博客里面告知引用办法：http://blog.csdn.net/kabulore 有任何疑问请联系QQ：1740437
JS年月日三级联动下拉框日期选择代码.zip
07-05
JS年月日三级联动下拉框日期选择代码，默认当前日期，代码附带详细中文注释，供大家参考。
JS年月日三级联动下拉框日期选择代码
06-26
JS年月日三级联动下拉框日期选择代码
js年月日三级联动代码
06-26
js代码，年月日三级联动，js三级联动年月日
用JavaScript写的年月日三级联动
09-21
用标准JavaScript实现的年月日下拉列表三级联动，支持IE6、FireFox3。
JS初始化年月日三级联动插件
03-09
JS初始化年月日三级联动插件 创建三个select标签 id分别为 YYYY,MM,DD,
使用纯JS实现年月日的三级联动
xiaoweids的博客
06-11 540
转自：微点阅读 https://www.weidianyuedu.com 年月日三下拉框联动 年
js年月日三级联动
始于足下
03-16 412
三级联动-年月日 var year=new Date().getFullYear();
html表单 当前年月日_js实现年月日表单三级联动
weixin_39843093的博客
12-22 666
用Html实现人人网注册界面 ，Js实现生日栏表单三级联动1. 效果2.Html代码部分人人网日期表单联动select{font:20px/40px '宋体';}option {width: 100px;}免费开通人人网账号注册邮箱: 你还可以使用 账号注册或者 手机号 注册创建密码: 真实姓名: 性别： 男女生日: 年月日我现在: 正在上学工作赋闲经商![](verycode.gif) 看不...
html年月日三级联动,js实现年月日三级联动
weixin_31617975的博客
06-08 248
Document年月日//定义年、月、日方法函数window.onload = function(){strYYYY = document.form1.YYYY.outerHTML;strMM = document.form1.MM.outerHTML;strDD = document.form1.DD.outerHTML;MonHead = [31, 28, 31, 30, 31, 30, 31...
JS实现年月日周几返回到页面上
最新发布
04-11
你可以使用JavaScript的Date对象来实现返回年月日周几到页面上。以下是一个简单的示例代码： ```javascript var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值