JavaScript实现的下拉框联动

来源:互联网 发布:Mac上安装anaconda 编辑:程序博客网 时间:2024/05/21 17:08

 一个简单的Javascript做的下拉框联动,这是以前做界面原型时学习的一个例子,收藏了。

 

 

<!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>