js年月日联动菜单

<select name="year" onchange="YYYYDD(this.value)">
    <option value="">年</option>
</select>
<select name="month" onchange="MMDD(this.value)">
    <option value="">月</option>
</select>
 <select name="day">
    <option value="">日</option>
</select>
function yyyyMMdd()
    {
        monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//每月天数的数组

        //给年下拉框赋内容
        var y   = new Date().getFullYear();//获得今年的年份
        for (var i = y; i > 1948; i--) //以今年为准,前30年,后30年
            document.registerForm.year.options.add(new Option(i,i));

        //给月份的下拉框赋内容
        for (var j = 1; j < 13; j++)
            document.registerForm.month.options.add(new Option(j, j));
    }
    if(document.attachEvent)
        window.attachEvent("onload", yyyyMMdd);
    else
        window.addEventListener("load", yyyyMMdd, false);

    function optionsClear(e)
    {
        e.options.length = 1;//使option的长度为1,即第一项下面的选项清空
    }

    function isLeapYear(year)//判断是否闰平年
    {
        return(0 == year%4 && (year%100 !=0 || year%400 == 0));
    }

    function writeDay(n)  //据条件写日期的下拉框
    {
        var e = document.registerForm.day;
        optionsClear(e);
        for (var i=1; i<(n+1); i++)
            e.options.add(new Option(i,i));
    }

    function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {   //str为月份
        var monthIndex=document.registerForm.month.selectedIndex;//月option的索引
        var monthValue = document.registerForm.month.options[monthIndex].value;
        if (monthValue == ""){
            var d = document.registerForm.day; //获取day的option
            oyptionsClear(d);//
            return;
            }
        var m = monthDays[monthValue - 1];//让月份减1为[monthDays(每月天数)]这个数组的坐标就指向这个月底天数
        if (monthValue ==2 && isLeapYear(str)) m++;
            writeDay(m);
    }
    function MMDD(str)  //月发生变化时日期联动
    {   //str为月份
        var yearIndex=document.registerForm.year.selectedIndex;
        var yearValue = document.registerForm.year.options[yearIndex].value;
        if (yearValue == ""){
            var d = document.registerForm.day;
            optionsClear(d);
            return;
        }
        var m = monthDays[str - 1];
        if (str ==2 && isLeapYear(yearValue)) m++;
            writeDay(m);
    }
时间: 2024-10-06 20:27:17

js年月日联动菜单的相关文章

中国地区三级联动菜单(纯js制作)

第一步:在网页中写入如下代码: <!DOCTYPE html> <!--次行代表使用的是html5,如果不支持请换成html4--> <html> <head> <title>三级联动菜单</title><br> <script src="style/jsAddress.js"></script> <!--需要和js文件在同一目录下--> </head>

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

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

原博客网址: http://www.cnblogs.com/gdcgy/p/5467742.html 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

JS省市县三级联动菜单

<html> <head> <title>JS省市县三级联动菜单丨潜水曝气机</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body,select { font-size:9pt; font-family:Verdana; } a { color:red; text-dec

js实现二级月日联动菜单

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现二级月日联动菜单</title> </head> <body> <form name="form1" method="post" action=""

转: javascript实现全国城市三级联动菜单代码

<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="JavaScript"> function Dsy() { this.Items = {}; } Dsy

一个简单的联动菜单和定时器

一个简单的联动菜单: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8" /> <title>联动菜单</title> </head> <script type="text/javascript"

项目实战之FORM、联动菜单组件的实现

联动菜单也是我们常用功能之间,下面描述一下联动菜单的一种实现. 一.功能描述:两级联动. 在选择了集群中一项后,会将该集群下的key值都关联出来.开发时在这里遇到一个问题,卡了很久.遇到的问题:在上图的状态下,更换一级联动的值,二级联动的值依然会保留上一次的值.其实这个问题挺简单的.就是在加载二级联动值时先清除.重点还是在对ant的组件不了解,不会使用. 二.功能代码 import React from 'react'; import '../index.less'; import {Form,

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <