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. Flask入门之自定义过滤器(匹配器）

    1.  动态路由的匹配器? 不知道这种叫啥名,啥用法,暂且叫做匹配器吧. Flask自带的匹配器可以说有四种吧(保守数字,就我学到的) 动态路由本身,可以传任何参数字符串或者数字,如:<user ...

  2. zfs文件系统简单使用

    关于ubuntu下zfs的使用参考:https://github.com/zfsonlinux/zfs/wiki/Ubuntu%2016.04%20Root%20on%20ZFS 安装zfs: 启动z ...

  3. vue组件的生命周期

    先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...

  4. Servlet知识点总结

    一, ServletAPI中有4个Java包: 1.javax.servlet:其中包含定义Servlet和Servlet容器之间契约的类和接口 2.javax.servlet.http:其中包含定义 ...

  5. ELK 架构之 Elasticsearch 和 Kibana 安装配置

    阅读目录: 1. ELK Stack 简介 2. 环境准备 3. 安装 Elasticsearch 4. 安装 Kibana 5. Kibana 使用 6. Elasticsearch 命令 最近在开 ...

  6. .NET开发微信小程序-接收微信支付回调数据

    获取微信支付传回来的数据 1.MVC控制器 /// <summary> /// 付款返回的数据 /// </summary> /// <returns></r ...

  7. 夜神模拟器链接Android studoid

    在cmd 窗口输入:adb.exe connect 127.0.0.1:62001然后as就自动匹配了夜神经常忘记,特此提醒

  8. 微信小程序开发资源汇总 💯

    目录 官方文档 工具 插件 讨论 教程 视频教程 文章 代码 轮子 置顶 WePY:组件化的小程序开发框架 

  9. Netty中的EventLoop和线程模型

    一.前言 在学习了ChannelHandler和ChannelPipeline的有关细节后,接着学习Netty的EventLoop和线程模型. 二.EventLoop和线程模型 2.1. 线程模型 线 ...

  10. java 23种设计模式教程

    设计模式分类 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. 行为型模 ...