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. HiJson(Json格式化工具)64位中文版下载 v2.1.2

    链接:https://pan.baidu.com/s/15gMvig15iUjpqSX7nUZ-5Q 密码:8086

  2. android 开发常见问题

    指定版本 就OK了 路径: android/app/build.gradle compile ("com.facebook.react:react-native:填你自己的RN版本" ...

  3. Centos7 下 tty2等文字窗口的中文乱码问题分析

    在使用 tty 的时候遇到了一个事情,那就是主文件夹下面的中文文件是乱码: [备注]tty 是 通过 CTRL + ALT +F2~F6  获得的,  这与桌面系统中的终端不是一个概念,  望看到这篇 ...

  4. 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

    1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...

  5. python函数注释, ：与 ->

    python函数注释, :与 -> 如图:add1函数中的:意思是:函数中的参数说明    add2函数中:->意思是:函数的返回值为整型 这两种方法都是函数的注释方法,具体使用时要别人能 ...

  6. HSLA色相饱和透明度

    H:Hue(色调),取值为:0 - 360.将色相值想成一个圆环中的度数,随着在圆环上移动,得到不同的颜色. S:Saturation(饱和度),取值为:0.0% - 100.0%.数值越低(降低饱和 ...

  7. switch窗口句柄

    Set<String> windows = browser.getWebDriver().getWindowHandles(); //获得所有窗口句柄 for (String string ...

  8. Java语言 链接Oracle数据库

    package com.tao.pojo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pre ...

  9. 【bzoj 2326】【HNOI 2011】数学作业

    题解: 矩阵裸体. #include<cstdio> #include<cstring> #include<cmath> typedef long long ll; ...

  10. BZOJ_5301_[Cqoi2018]异或序列&&CF617E_莫队

    Description 已知一个长度为 n 的整数数列 a[1],a[2],…,a[n] ,给定查询参数 l.r ,问在 [l,r] 区间内,有多少连续子 序列满足异或和等于 k . 也就是说,对于所 ...