当前位置：首页 > 建站学院 > 前端开发 > html+js实现城市联动、日期联动示例

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

前端开发发布日期：2025年05月13日浏览次数：184次

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

1.城市联动

　　a.js代码部分：

 　　<head>
         <title></title>
         <script type="text/javascript">
             function addProvince()
             {
                 var prov = document.getElementById("province");
                 var provs = ["河南", "河北", "山西", "新疆"];
                 prov.length = ;        
                 for (var i=;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 = ;        
                 for (var i=; 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 onload="addProvince()">
         <center>
             <form method="post" >
                 省份：<select id="province" onchange="addCity()">
                       </select>
                 城市：<select id="city">
                       </select>
             </form>
         </center>
     </body>

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

     <head>
         <title></title>
         <script type="text/javascript">
             function addOption()
             {
                 for (var i=; i<; i++)
                 {
                     document.getElementById("year").options[i] = new Option(+i, +i);
                 }
 
                 for (var i=; i<=; i++)
                 {
                     document.getElementById("month").options[i-] = new Option(i, i);
                     document.getElementById("month").options[].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 %  ==  && year %  != ) || (year %  ==  && year %  == ));
                 if (isLeap && (month == ))    
                 {
                     for (var i=; i<=; i++)
                     {
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[i-] = new Option(i, i);
                     }
                 }
                 if (!isLeap && (month == ))
                 {
                     for (var i=; i<=; i++)
                     {
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[i-] = new Option(i, i);
                     }
                 }
                 if (month ==  || month ==  || month ==  || month ==  || month ==  || month ==  || month == )
                 {
                     for (var i=; i<=; i++)
                     {
                         document.getElementById("day").options[i-] = new Option(i, i);
                     }
                 }
                 if (month ==  || month ==  || month ==  || month == )    //判断是否为非2月
                 {
                     for (var i=; i<=; i++)
                     {
                         document.getElementById("day").options[] = null;
                         document.getElementById("day").options[i-] = new Option(i, i);
                     }
                 }
             }
         </script>
     </head>

　　b.<body>中代码部分：

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

上面是年月日的三级联动和省市的二级联动的一个示例，也可以用json等实现，后面再说。

以上就是html+js实现城市联动、日期联动示例的详细内容，更多关于html+js实现城市联动、日期联动示例的资料请关注九品源码其它相关文章！

相关热词： html+js 实现城市联动日期示例

上一篇：微信小程序 confirm（删除提示）
下一篇：[html] link 标签 rel=canonical 属性的用法

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站

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

文章分类

最后更新

热门排行