html+js实现城市联动、日期联动示例

最新推荐文章于 2024-04-28 10:45:38 发布

软件测试李同学

最新推荐文章于 2024-04-28 10:45:38 发布

阅读量1.3k

点赞数 2

分类专栏： HTML CSS JavaScript 文章标签： html javascript 城市联动日期联动

HTML CSS JavaScript 专栏收录该内容

15 篇文章 12 订阅

订阅专栏

html+js实现城市联动、日期联动示例.

城市联动日期联动是个很常用的功能，实现起来也各式各样，下面记录一个比较清楚简单的方法，以备今后查询。

1.城市联动
　　a.js代码部分：

<head>
        <title></title>
        <script type="text/javascript">
            function addProvince()
            {
                var prov = document.getElementById("province");
                var provs = ["河南", "河北", "山西", "新疆"];
                prov.length = 0;        
                for (var i=0;i<provs.length ; i++)
                {
                    var op = document.createElement("option");
                    op.value = provs[i];
                    op.innerHTML = provs[i];
                    prov.appendChild(op);
                }
                addCity();
            }
            function addCity()
            {
                var city = document.getElementById("city");
                var cities = [
                    ["郑州市","洛阳市","开封市","南阳市"],
                    ["石家庄市","邯郸市","保定市"],
                    ["太原市","大同市","晋城市","运城市"],
                    ["乌鲁木齐市","吐鲁番地区","哈密","昌吉"]
                ];
                var provIndex = document.getElementById("province").selectedIndex;
                city.length = 0;        
                for (var i=0; i<cities[provIndex].length; i++)
                {
                    var op = document.createElement("option");
                    op.value = cities[provIndex][i];
                    op.innerHTML = cities[provIndex][i];
                    city.appendChild(op);
                }
            }
        </script>
    </head>

b.<body>中代码部分：

<body οnlοad="addProvince()">
        <center>
            <form method="post" >
                省份：<select id="province" οnchange="addCity()">
                      </select>
                城市：<select id="city">
                      </select>
            </form>
        </center>
    </body>

2.日期联动：
　　a.js代码部分:

<head>
        <title></title>
        <script type="text/javascript">
            function addOption()
            {
                for (var i=0; i<10; i++)
                {
                    document.getElementById("year").options[i] = new Option(1990+i, 1990+i);
                }

                for (var i=1; i<=12; i++)
                {
                    document.getElementById("month").options[i-1] = new Option(i, i);
                    document.getElementById("month").options[0].selected = true;
                }
            }
            function changeOption()
            {
                var yearIndex = document.getElementById("year").selectedIndex;
                var year = document.getElementById("year").options[yearIndex].value;
                var monthIndex = document.getElementById("month").selectedIndex;
                var month = document.getElementById("month").options[monthIndex].value;
                var isLeap = ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0));
                if (isLeap && (month == 2))    
                {
                    for (var i=1; i<=29; i++)
                    {
                        document.getElementById("day").options[29] = null;
                        document.getElementById("day").options[30] = null;
                        document.getElementById("day").options[i-1] = new Option(i, i);
                    }
                }
                if (!isLeap && (month == 2))
                {
                    for (var i=1; i<=28; i++)
                    {
                        document.getElementById("day").options[28] = null;
                        document.getElementById("day").options[29] = null;
                        document.getElementById("day").options[30] = null;
                        document.getElementById("day").options[i-1] = new Option(i, i);
                    }
                }
                if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
                {
                    for (var i=1; i<=31; i++)
                    {
                        document.getElementById("day").options[i-1] = new Option(i, i);
                    }
                }
                if (month == 4 || month == 6 || month == 9 || month == 11)    //判断是否为非2月
                {
                    for (var i=1; i<=30; i++)
                    {
                        document.getElementById("day").options[30] = null;
                        document.getElementById("day").options[i-1] = new Option(i, i);
                    }
                }
            }
        </script>
    </head>

b.<body>中代码部分：

<body οnlοad="addOption();changeOption()">
       <form action="" method="post" >
            <select id="year" size="1" οnchange="changeOption()">
                    <option></option>
            </select>年
            <select id="month" size="1" οnchange="changeOption()">
                    <option></option>
            </select>月
            <select id="day" size="1">
                     <option></option>
            </select>日
        </form>
    </body>

原文地址：http://www.cnblogs.com/tzhz/archive/2013/04/27/3046301.html

软件测试李同学

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+js实现城市联动、日期联动示例

html+js实现城市联动、日期联动示例.城市联动日期联动是个很常用的功能，实现起来也各式各样，下面记录一个比较清楚简单的方法，以备今后查询。1.城市联动　　a.js代码部分： function addProvince() { var prov = documen
复制链接

扫一扫

专栏目录