<!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. Mysql-学习笔记（==》存储过程 九）

    1.存储过程概念在大型数据库系统中,一组为了完成特定功能的sql语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. 2.建立存储过程delimit ...

  2. SQL高级查询——50句查询(含答案)

    -一个题目涉及到的50个Sql语句 --(下面表的结构以给出,自己在数据库中建立表.并且添加相应的数据,数据要全面些. 其中Student表中,SId为学生的ID) ----------------- ...

  3. Linux Source命令及脚本的执行方式解析

    转 http://www.51testing.com/html/38/225738-206878.html 当我修改了/etc/profile文件,我想让它立刻生效,而不用重新登录:这时就想到用sou ...

  4. SqlSever基础 isnull 将null替换成指定字符串

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  5. Spring 框架 详解 （四）------IOC装配Bean(注解方式)

    Spring的注解装配Bean Spring2.5 引入使用注解去定义Bean @Component  描述Spring框架中Bean Spring的框架中提供了与@Component注解等效的三个注 ...

  6. sql语句中的注释符号

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

  7. js跨域及解决方案

    本文出自:http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html 1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器 ...

  8. 迪米特法则（LoD），即最少知识原则

    解释: 如果两个类不必彼此直接通信,那么这两个类就不应当发生直接的相互作用.如果其中一个类需要调用另一个类的某一个方法的话,可以通过第三者转发这个调用. 重点: 在类的结构上,每个类都应当尽量降低成员 ...

  9. CUBRID学习笔记 7 ms常见错误

    基本不是权限问题,就是dll问题.  重新下载或应用dll注意版本. 权限的问题,先本机测试. 看看在web管理有无问题.  剩下的基本就简单了 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有, ...

  10. Java方法

    所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法允许被访问的权限范围, 可以是 public.protected.p ...