有人想要学习下纯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. wireshark不仅仅是用来抓包分析网络的;

    凡是不找借口,不排弄推诿理由,提高自我,尽量人事; AIX smit(system manager interface tool); formerly alike; derivatives dpkg ...

  2. 容联云通讯_提供网络通话、视频通话、视频会议、云呼叫中心、IM等融合通讯能力开放平台。

    容联云通讯_提供网络通话.视频通话.视频会议.云呼叫中心.IM等融合通讯能力开放平台. undefined

  3. CentOS6.6从头到尾部署nginx与tomcat多实例 转

    前提条件: 1.需要一个全新的centos系统(本文中用到是centos6.6) 2.vmware虚拟机 3.vmware下安装centos系统,以NAT方式与宿主机相连 4.在centos系统中pi ...

  4. Zend Framework 2参考Zend\Authentication(HTTP认证适配器)

    Zend Framework 2参考Zend\Authentication(HTTP认证适配器) 介绍 Zend\Authentication\Adapter\Http提供了RFC-2617, Bas ...

  5. Java-SSI框架学习

    框架简介: 相信大家对于mvc的三层架构已经灰常熟悉了,在这就不细讲了,个人感觉ssi的框架结构还是比较典型的mvc三层架构,还是比较容易上手的.关于这块的入门我想特别感谢下FrankHui童鞋,在他 ...

  6. hdu 1317 XYZZY【Bellheman_ford 判断正环小应用】

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1317 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  7. Android.mk各种文件编译汇总

    一.源代码编译 1.1 so预编译 LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := libAppArea LOCAL ...

  8. 第33日 我疯了集成平台（六）-步履轻盈JQuery(四)

    6一个月28日本,天阴下雨. " 微雨过,小荷翻,榴花开欲燃.玉盆纤手弄清泉,琼珠碎却圆."          古老的JavaScript,且乱且复杂.封装成库,青春焕发,这样人们 ...

  9. Linux发送监控指标到内部邮箱

    数据库的健康监控是个很重要的工作.重要的指标\KPI监控结果会有专门的採集.监控.告警系统来做相关事情. 而一些不是很重要的或者还在设计和调试阶段的相关指标,我仅仅是想发送到我自己邮箱,本文就针对在s ...

  10. oralce11 过程

    PL/SQL 块的结构和实例 pl/sql(procedural language(过程化语言)/sql)是oracle在标准的sql语言上的扩展.pl/sql不仅允许嵌入sql语言,还可以定义变量和 ...