js文件

SYT="-请选择年份-";

SMT="-请选择月份-";

SDT="-请选择日期-";

BYN=50;//年份范围往前50年

AYN=5;//年份范围往后0年

function YMDselect(){

	this.SelY=document.getElementsByName(arguments[0])[0];

	this.SelM=document.getElementsByName(arguments[1])[0];

	this.SelD=document.getElementsByName(arguments[2])[0];

	this.DefY=this.SelD?arguments[3]:arguments[2];

	this.DefM=this.SelD?arguments[4]:arguments[3];

	this.DefD=this.SelD?arguments[5]:arguments[4];

	this.SelY.YMD=this;

	this.SelM.YMD=this;

	this.SelY.onchange=function(){YMDselect.SetM(this.YMD)};

	if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)};

	YMDselect.SetY(this)

};

//设置年份

YMDselect.SetY=function(YMD){

	dDate = new Date();

	dCurYear = dDate.getFullYear();

	YMD.SelY.options.add(new Option(SYT,'0'));

	for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){

		YMDYT=i+'年';

		YMDYV=i;

		OptY = new Option(YMDYT,YMDYV);

		YMD.SelY.options.add(OptY);

		if(YMD.DefY==YMDYV) OptY.selected=true

	}

	YMDselect.SetM(YMD)

};

//设置月份

YMDselect.SetM=function(YMD){

	YMD.SelM.length = 0;

	YMD.SelM.options.add(new Option(SMT,'0'));

	if(YMD.SelY.value>0){

		for(var i=1;i<=12;i++){

			YMDMT=i+'月';

			YMDMV=i;

			OptM=new Option(YMDMT,YMDMV);

			YMD.SelM.options.add(OptM);

			if(YMD.DefM==YMDMV) OptM.selected=true

		}

	}

	if(YMD.SelD)YMDselect.SetD(YMD)

};

//设置日期

YMDselect.SetD=function(YMD){

	YI=YMD.SelY.value;

	MI=YMD.SelM.value;

	YMD.SelD.length = 0;

	YMD.SelD.options.add(new Option(SDT,'0'));

	if(YI>0 && MI>0){

		dPrevDate = new Date(YI, MI, 0);

		daysInMonth=dPrevDate.getDate();

		for (d = 1; d <= parseInt(daysInMonth); d++) {

			YMDDT=d+'日';

			YMDDV=d;

			OptD=new Option(YMDDT,YMDDV);

			YMD.SelD.options.add(OptD);

			if(YMD.DefD==YMDDV)OptD.selected=true

		}

	}

}

html文件

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>js年月日三级联动</title>

    <script src ="js\YYYYMMDDClass.js"></script>

</head>

<body >

	<form action="" style="" method="get">

		<span>Birthday: </span>

		<select name="year"></select>

		<select name="month"></select>

		<select name="day"></select>

		<br>

		<button type="submit" value="submit">submit</button>

		<script>

			/**

			 * 年月联动

			 * new YMDselect('year','month');

			 * new YMDselect('year','month',2010);//默认2010

			 *new YMDselect('year','month',2010,2);//2010    2

			 * */

			/**

			 * 年月日联动

			 * new YMDselect('year','month','day1');

			 *new YMDselect('year','month','day1',2020);默认20020年

			 * new YMDselect('year','month','day1',2020,6);默认20020年6月

			 * new YMDselect('year','month','day',2020,6,22); 默认20020年6月22日

			 * */

			new YMDselect('year','month','day');

		</script>

	</form>

</body>

</html>

JavaScript 用法

1.js文件外联

<head>

    <script src ="js\YYYYMMDDClass.js"></script>

</head>

2.直接用

<head>

    <script>

        alert("我的第一个 JavaScript");

    </script>

</head>

3.在body中用

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

.

.

</body>

</html>

更多用法请访问W3CSchool

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

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

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

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

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

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

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

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

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

  5. js实现年月日三级联动

    当我们注册一个qq的时候,会看到一个三级年月日的联动菜单,下面简单介绍. <!doctype html> <html lang="en"> <head ...

  6. js 实现全国省市区三级联动

    效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  7. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  8. HTML5 UI 控件Mobiscroll的使用（年月日三级联动）

    概述: 遇到制作一个html5界面,需要选择年月日,其实这个功能很常用.一般我们都是网上找,之前也没有收藏一个自己常用的,今天发现一个不错的库.特此记录一下使用过程,以便以后遇到了方面查阅. 1.官方 ...

  9. jQuery：年月日三级联动

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs ...

随机推荐

  1. 读取本地outlook邮件内容

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Python_socket_TCP

    zServer.py # coding=utf-8 import socket words={'how are you?':'Fine,thank you.', ', 'what is your na ...

  3. Maven安装和使用

    一.安   装 1.解压好后,添加系统环境变量 变量名:MAVEN_HOME 属性值:D:\apache-maven-3.3.3  //也就是解压的路径 path中添加:%MAVEN_HOME%\bi ...

  4. CF#483(div2 C)

    http://codeforces.com/contest/984/problem/C C. Finite or not time limit per test 1 second memory lim ...

  5. nohup在linux中的挂起

    笔者也是一个linux新手,最近在学习linux相关的东西,本人是一个node爱好者,想在linux上写一个linux服务,我的环境是centeros7,用putty链接远端的服务器,要想让服务在服务 ...

  6. Unix系统的常用信号

    编号为1 ~ 31的信号为传统UNIX支持的信号,是不可靠信号(非实时的),编号为32 ~ 63的信号是后来扩充的,称做可靠信号(实时信号).不可靠信号和可靠信号的区别在于前者不支持排队,可能会造成信 ...

  7. c++ 输出精度

    1  保留小数点后**位 cout.flags(ios::fixed); cout.precision(4); //设置输出精度,

  8. 小马哥Python知识体系

    从今天起,小马哥每天都发表一篇关于Python的博文,知识范围由Python的0基础,逐渐到项目应用. 目的: 在分享中学习 每天的新博文都会加入到这里成为超链接,方便各位点击查阅. Python基础 ...

  9. 找不到 blog.csdn.net 的服务器 DNS 地址

    找不到 blog.csdn.net 的服务器 DNS 地址 csdn的博客用win7的电脑打不开是怎么回事?手机可以正常打开,csdn的bbs 下载什么的都可以正常使用. blog.csdn.net显 ...

  10. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...