有人想要学习下纯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. sql日志框架log4jdbc的AOP式使用

    log4jdbc.log4j2 参考:1.  http://badqiu.iteye.com/blog/743100 2.  https://code.google.com/p/log4jdbc/ 3 ...

  2. Ubuntu 如何使用apt命令安装、升级、卸载软件

    apt-get是一条linux命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. apt-get命令一般需要root权限执行,所以一般跟着su ...

  3. 前端自动生成/加载CSS

    前言: 1.我很懒! 2.写样式时,很多时候需要单独设置长度.宽度.内间距.外间距等.于是,就会有很多CSS代码会出现很多类似以下的代码: .w20: { width: 20px; } .mt10: ...

  4. iOS 隐藏Tabbar

    两种方法用来隐藏tabBar 1.在本页面隐藏 #pragma mark - 隐藏tabBar - (void)viewWillAppear:(BOOL)animated{  self.tabBarC ...

  5. "http-8080-3" java.lang.OutOfMemoryError: PermGen space C3P0死锁的问题

    Exception in thread ""http-bio-8080"-exec-1" java.lang.OutOfMemoryError: PermGen ...

  6. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  7. HDU2084JAVA

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  8. Oracle11g新特性导致空表不能导出问题

        ORACLE 11G在用EXP导出时,发现空表(没有数据或者没有用过的表)不能导出了.     查了一下资料,说是Oracle 11G中有个新特性,当表无数据时,不分配segment,以节省空 ...

  9. android js 互调

    public class BoatsActivity extends Activity { Handler mHandler = new Handler();//处理消息的handler @Suppr ...

  10. Oracle笔记-表的管理

    3.1创建和管理表在Oracle表中使用的emp,dept,sal都是系统内建好的表,那么在SQL语法中同样支持了表的创建语句,要想创建表,则应先了解下Oracle中最常用的几种数据类型3.1.1常用 ...