当我们注册一个qq的时候，会看到一个三级年月日的联动菜单，下面简单介绍。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

  <form name=form1>

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

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

</select>

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

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

</select>

<select name=DD>

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

</select>

</form>  

 </body>

<script language="JavaScript">  

//定义年、月、日方法函数

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, 31, 30, 31, 30, 31];  

//先给年下拉框赋内容

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

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

for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后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>

</html>

js实现年月日三级联动的更多相关文章

  1. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  2. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS 实现的年月日三级联动

    js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 A ...

  4. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  5. 时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  6. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  7. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. js实现省市区三级联动

    电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...

  9. js+ajax编码三级联动

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

随机推荐

  1. 微信公众号：1-IDHTTP控件：GET/POST 请求获取access_token

    (图来源于方蓓?) 首先要理解公众号的流程.通过图知道,我们要:1.你要有个web服务器,用于和微信服务器通讯.你的web服务器必须让微信服务器能找到.2.通信要求按照微信公众号开发要求的格式提供相关 ...

  2. Servlet3.0中使用getPart进行文件上传

    这个先进些,简单些,但书上提供的例子不能使用,到处弄了弄才行. servlet代码: package cc.openhome; import java.io.InputStream; import j ...

  3. hdu_1861_游船出租_201402282130

    游船出租 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. [bzoj1455]罗马游戏_左偏树_并查集

    罗马游戏 bzoj-1455 题目大意:给你n个人,2种操作,m次操作:1.将i号士兵所在的集合的最小值删除 2.合并i和j两个士兵所在的团体 注释:$1\le n\le 10^6$,$1\le m ...

  5. Oracle数据库点滴

    分页查询: SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A WHERE ROWNUM <= 40)W ...

  6. [转]十五天精通WCF——第十二天 说说wcf中的那几种序列化

    我们都知道wcf是由信道栈组成的,在我们传输的参数走到传输信道层之前,先需要经过序列化的过程,也就是将参数序列化为message,这篇 我们就来说说这里的序列化,蛮有意思的,可能初学者也明白,在wcf ...

  7. 【Java集合源代码剖析】Hashtable源代码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/36191279 Hashtable简单介绍 Hashtable相同是基于哈希表实现的,相同每 ...

  8. linux 搭建https server （apache）

    一.  安装准备 1.    安装Openssl  要使Apache支持SSL,须要首先安装Openssl支持.这里使用的是openssl-0.9.8k.tar.gz    下载Openssl:htt ...

  9. hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现

    http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...

  10. 2015 年度新增开源软件排名TOP100

    本榜单包括 2015 年开源中国新收录的 5977 款开源软件中,依据软件本身的关注度.活跃程度进行排名前 100 名的软件.从这份榜单中也许能够了解到最新业界的趋势. 1.SwitchyOmega ...