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. SSM-SpringMVC-24：SpringMVC异常高级之自定义异常

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 自定义异常,大家都会,对吧,无非就是继承异常类等操作,很简单,我就不多扯皮了,但是在xml配置文件中有个不同的 ...

  2. 在单用户模式下修改CentOS的root密码

    我们在使用CentOS的过程中可能会发生忘记root用户密码的情况,本文就从应用的角度简单介绍一下如何在单用户模式下修改root用户的密码. 开启CentOS,进入系统启动菜单 将光标停留在系统开机时 ...

  3. spring security oauth2

    https://connect.qq.com/manage.html#/ http://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%BA%94%E7%94%A8 ...

  4. SVN更新失败，提示locked 怎么破

    有时在svn更新或提交代码时,会报错,让你cleanup  如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...

  5. 用 150 行 Python 代码写的量子计算模拟器

    简评:让你更轻松地明白,量子计算机如何遵循线性代数计算的. 这是个 GItHub 项目,可以简单了解一下. qusim.py 是一个多量子位的量子计算机模拟器(玩具?),用 150 行的 python ...

  6. Bootstrap 小结

    Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...

  7. SDOI2017 BZOJ 4820 硬币游戏 解题报告

    写在前面 此题网上存在大量题解,但本人太菜了,看了不下10篇均未看懂,只好自己冷静分析了.本文将严格详细地论述算法(避免一切意会和玄学),因此可能会比其它题解更加理论化一些,希望能对像我一样看了其它题 ...

  8. bzoj 4556 字符串

    后缀数组,暴力硬跑 贼快 #include<cstdio> #include<cstring> #include<iostream> #include<alg ...

  9. java集合框架之Collections

    参考http://how2j.cn/k/collection/collection-collections/369.html Collections是一个类,容器的工具类,就如同Arrays是数组的工 ...

  10. 我和Python的Py交易》》》》》》 浮点数的身世字谜

    什么是浮点数? 在数据类型中写道,浮点数是带小数点的小数,这个概念是不准确的:浮点数是除了无限不循环小数之外的小数,也就是可以用分数表示的带小数点的数. 好了,浮点数就这些内容,讲完了,各回各家,各找 ...