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. 《T-SQL查询》读书笔记Part 1.逻辑查询处理知多少

    一.关于T-SQL T-SQL是ANSI和ISO SQL标准的MS SQL扩展,其正式名称为Transact-SQL,但一般程序员都称其为T-SQL. 二.逻辑查询处理各个阶段 2.1 逻辑查询处理流 ...

  2. https://doc.opensuse.org/projects/kiwi/doc/

    KIWI 是用于创建操作系统映像的系统.映像是带有一个文件的目录,该文件包含操作系统.其应用程序与配置.操作系统的文件系统结构.可能的附加元数据,以及(取决于映像类型)磁盘几何属性和分区表数据.通过 ...

  3. IntelliJ IDEA中 todo的使用

    在代码的注释部分加入TODO 大小写忽略,如下图所示 查看项目中有哪些待办项,所下图所示

  4. 超越Ctrl+S保存页面所有资源

    如何抓取页面所有内容 基本需求 抓取页面所有内容主要包括一下内容: 页面内元素 页面元素包含服务端直接返回的元素,动态构建的元素 页面内所有资源 页面所有资源包含本页面所在域资源以及第三方域资源,同主 ...

  5. Python3.6下scrapy框架的安装

    首先考虑使用最简单的方法安装 pip install scrapy 命令安装,提示 Failed building wheel for Twisted Microsoft Visual C++ 14. ...

  6. selenium chromedriver与谷歌浏览器版本映射表

    chromedriver版本 支持的Chrome版本 v2.35 v62-64 v2.34 v61-63 v2.33 v60-62 v2.32 v59-61 v2.31 v58-60 v2.30 v5 ...

  7. 通过pycharm的Database设置进行数据库的可视化

    pycharm是一个很好的IDE,它还有一个功能直接通过这个IDE连接数据库,然后对数据库进行相关的操作,这样我们可以不用navicat for mysql这样的可视化工具了.   输入账号密码数据库 ...

  8. Ordering犀利的比较器

    Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...

  9. sort.go

    package clientv3 type SortTarget int type SortOrder int const (     SortNone SortOrder = iota     So ...

  10. BZOJ2751 [HAOI2012]容易题

    Description 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取 ...