有人想要学习下纯javascript联动的一些技巧，我这里就以日期的联动为例，附上一些代码
至于复杂的省市区联动，不建议用纯javascript的，而是用ajax的方式，该不在此讨论范围内，想要了解ajax是什么，最好去ajax板块看看

首先贴出的是普通编码下的日期联动代码：
1楼贴出的是整理过后的可重用框架代码，需要prototype框架支持（懒得写独立于prototype框架的代码了……）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期动态联动演示</title>
<script type="text/javascript">
    var oYears,oMonths,oDays,isLeapYear;
    var iy,im,id;
    
    window.onload=function () {
        initDate();
    }
    
    function initDate() {
        isLeapYear=false;
        oYears=document.getElementById('years');  //获得year的select
        oMonths=document.getElementById('months'); //获得month的select
        oDays=document.getElementById('days');        //获得day的select
        initYears();                                //初始化年份
        //设定三个select的onChange事件
        oYears.onchange=chgYear;                    
        oMonths.onchange=chgMonth;
        oDays.onchange=chgDay;
    }

function initYears() {
        oYears.length=1;
        var cYear=new Date().getYear();
        for (var i=cYear-20;i<=cYear;i++)                //从当前年份前20年开始循环，可以自己更改循环区间
        {
            var o=new Option(i.toString(),i.toString());
            oYears.add(o);
        }
    }

function chgYear() {
        try
        {
            isLeapYear=false;
            var year=parseInt(this.options[this.selectedIndex].value);    //获得选择的年份
            //判断是否是闰年，不懂公式的自己百度
            if (year%4==0) isLeapYear=true;
            if (year%100==0 && year%400!=0) isLeapYear=false;
            if (year%100==0 && year%400==0) isLeapYear=true;
            initMonths();                        //为了体现联动的效果，这里没选择一次年份都初始化一次月份
        }
        catch(e){;}
    }
    
    function initMonths() {
        oMonths.length=1;
        for (var i=1;i<13;i++)                //月份是1～12月
        {
            var o=new Option(i.toString(),i.toString());
            oMonths.add(o);
        }
    }
    
    function chgMonth() {
        try
        {
            var month=this.options[this.selectedIndex].value;
            if (month!='')             
            {
                var days;
                if (month.replace(/(1|3|5|7|8|10|12)/ig,'')=='')     //判断是否为大月
                    days=31;
                else if (month.replace(/(4|6|9|11)/ig,'')=='')        //判断是否为小月
                    days=30;
                else if (month=='2' && isLeapYear)                 //判断当是2月时，是否为闰月
                    days=29;
                else
                    days=28;
                initDays(days);
            }
        }
        catch(e) {;}
    }
    
    function initDays(days) {
        oDays.length=1;
        for (var i=1;i<=parseInt(days);i++)                    //循环显示天数
        {
            var o=new Option(i.toString(),i.toString());
            oDays.add(o);
        }
    }
    
    function chgDay() {
        //改变日期时，调用该函数
        try
        {
            var year=oYears.options[oYears.selectedIndex].value;
            var month=oMonths.options[oMonths.selectedIndex].value;
            var day=this.options[this.selectedIndex].value;
            alert('您选择了'+year+'年'+month+'月'+day+'日');
        }
        catch(e) {;}
    }
</script>

</head>

<body>
<div>
<select id="years">
    <option value="">选择年份</option>
</select>
<select id="months">
    <option value="">选择月份</option>
</select>
<select id="days">
    <option value="">选择日子</option>
</select>
</div>
</body>
</html>


纯javascript联动的例子的更多相关文章

  1. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  2. 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作～

    今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  5. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  6. 纯Javascript实现Windows 8 Metro风格实现

    Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...

  7. 纯javascript代码编写计算器程序

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...

  8. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  9. 纯javascript验证，100行超精简代码。

    这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验 ...

随机推荐

  1. 三个数从小到大排序—南阳acm

    问题描述: 现在要写一个程序,实现给三个数排序的功能     输入        输入三个正整数    输出       给输入的三个正整数排序       样例输入 20 7 33      样例输 ...

  2. MAC 下安装PIL

    1. 安装使用 pip install pil 结果报如下错误 Collecting PIL Could not find a version that satisfies the requireme ...

  3. 使用int?来确保值类型也可以为null

    基元类型为什么需要为null?考虑两个场景: 1)数据库中一个int字段可以被设置为null.在C#中,值被取出来后,为了将它赋值给int类型,不得不首先判断一下它是否为null.如果将null直接赋 ...

  4. Java对象的强、软、弱和虚引用详解

    1．对象的强.软.弱和虚引用 转自:http://zhangjunhd.blog.51cto.com/113473/53092/ 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无 ...

  5. 推荐一个可以直接在Visual Studio中看到complexity的插件CodeMaid

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个可以直接在Visual Studio中看到complexity的插件CodeMaid.

  6. Jmeter聚合报告分析

    Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 Average:平均响应时间--默认情况下是单个 Re ...

  7. 服装销售系统数据库课程设计（MVC）

    <数据库课程设计> 名称:Jia服装销售网站 姓名:陈文哲 学号:…… 班级:11软件工程 指导老师:索剑 目录 目录 1 需求分析 3 一:销售部门机构情况 3 二:销售部门的业务活动情 ...

  8. JAAS LOGIN IN WEBLOGIC SERVER--reference

    The Java Authentication and Authorization Service (JAAS) is a standard extension to the security in ...

  9. WebService学习笔记系列（三）

    网上有一些提供webservice服务的网站,我们要怎么调用呢? 今天来看个如何调用手机归属地查询服务.这个网站上提供了许多webservice服务,其中包括手机归属地查询服务,我们今天就用wsimp ...

  10. Java基础知识强化之集合框架笔记48：产生10个1~20之间的随机数（要求：随机数不能重复） 简洁版

    1. 编写一个程序,获取10个1至20的随机数,要求随机数不能重复. 分析:  A: 创建随机数对象  B: 创建一个HashSet集合  C: 判断集合的长度是不是小于10    是:就创建一个随机 ...