有人想要学习下纯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. 你为什么学MSP430

    很清楚,很明白,目的性极强,你学这个,是为了竞赛,学51也是,学习FPGA也是,你压根打心眼里就没打算走硬件方向,原因不多说,尽管你还是喜欢硬件的,但是,现实是,一个人的精力是有限的,你啊,好好弄好你 ...

  2. 337. House Robber III

    二刷吧..不知道为什么house robbery系列我找不到笔记,不过印象中做了好几次了. 不是很难,用的post-order做bottom-up的运算. 对于一个Node来说,有2种情况,一种是选( ...

  3. Navicat远程连接MySQL数据库

    1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...

  4. 加速数组操作（Array）

    Measure-Command { $ar = @() for ($x=0; $x -lt 10000; $x++) { $ar += $x } }执行结果:3.301s Measure-Comman ...

  5. LeetCode153:Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  6. Android - 封装Fragment不依赖于Activity

    封装Fragment不依赖于Activity 本文地址:http://blog.csdn.net/caroline_wendy Fragment直接托管activity的intent会破坏Fragme ...

  7. End-to-End Tracing of Ajax/Java Applications Using DTrace

    End-to-End Tracing of Ajax/Java Applications Using DTrace         By Amit Hurvitz, July 2007     Aja ...

  8. locale------- linux字符集

    查看当前系统字符集 [root@server1 ~]# locale LANG=zh_CN.UTF-8LC_CTYPE="zh_CN.UTF-8"LC_NUMERIC=" ...

  9. Bash中的$符号

    脚本名称:$0 PID:$$ 参数个数:$# 脚本返回值:$? 第x个参数:$x 第10个以上的参数加大括号:${10} 所有参数:$@ #!/bin/bash echo "The prog ...

  10. 微信分组群发45028，微信分组群发has no masssend quota hint

    微信分组群发45028,微信分组群发has no masssend quota hint >>>>>>>>>>>>>> ...