<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
</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">
    <option value="">选择 日</option>
  </select>
</form>
<script language="JavaScript"><!--  
   function YYYYMMDDstart()  
   {  
           MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
   
           //先给年下拉框赋内容  
           var y  = new Date().getFullYear();  
           for (var i = (y-30); i < (y+30); 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); //赋日期下拉框Author:meizz  
           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));  
   }  
   function IsPinYear(year)//判断是否闰平年  
   {     return(0 == year%4 && (year%100 !=0 || year%400 == 0));}  
   function optionsClear(e)  
   {  
        e.options.length = 1;  
   }  
   //--></script>
</body>
</html>

html年月日下拉联动菜单 年月日三下拉框联动的更多相关文章

  1. [ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  2. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  3. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  4. 为下拉式菜单(DropDownList)添加第一个选项

    很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body>    <form id= ...

  5. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  6. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  7. 一个很好的JS,ASP二级下拉框联动。

    在我们制作网站会员注册信息时,一般会涉及到填写自己所在省/市,如果用input或textarea做成填写形式不太理想.所以大部分网站都会选择联动下来列表形式,做起来也不算很复杂,同时看上去也很轻松. ...

  8. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  9. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

随机推荐

  1. Java总结反射

    [案例1]通过一个对象获得完整的包名和类名 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 package Reflect;   /**  * 通过一个对象获得完整的包名和类名 ...

  2. SD卡驱动分析(一)

    Android下的SD卡驱动与标准LINUX下的SD卡驱动好像没有太大的区别,这里就以高通的ANDROID 2.3以代表,来简要分析一下LINUX下SD卡驱动的写法.由于小弟的技术有限,分析的有错的地 ...

  3. IOS设计模式之一（MVC模式，单例模式）

    iOS 设计模式-你可能已经听说过这个词,但是你真正理解它意味着什么吗?虽然大多数的开发者可能都会认为设计模式是非常重要的,然而关于设计模式这一主题的文章却不多,并且有时候我们开发者在写代码的时候也不 ...

  4. ProgressBar 的使用

    ProgressBar 的使用方法 转载:http://blog.csdn.net/mad1989/article/details/38042875

  5. 【mark】linux 终端命令行下的快捷键（自己已验证所有）

    说明: \c + a:表示ctrl+a \a + a:表示alt+a 命令列表: 1 移动: \c + a:将光标移到行首 \c + e:将光标移到行尾 \c + f:将光标向后(右)移动一个字符 \ ...

  6. sql语句中的注释符号

    sql语句中的注释符号     mysql # 到该行结束.-- 到该行结束 以及 的注释方格:mysql> SELECT 1+1;     # 这个注释直到该行结束mysql> SELE ...

  7. Common Macros for Build Commands and Properties

    https://msdn.microsoft.com/en-us/library/c02as0cs.aspx $(ProjectDir)      The directory of the proje ...

  8. 【原创】pads2007 Layout 电气连接性检查过孔显示错误

    如图所示的电源铜皮过孔,勾选stiching选项,连接性检查会报错误: 去掉stiching选项,连接错误消失.

  9. JS实现 键盘操作

    JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...

  10. A Star算法笔记

    回顾A*算法,偶得一源代码,略有瑕疵,改正之,并置于下. using System; using System.Collections.Generic; using System.Linq; usin ...