JavaScript省市级联

最新推荐文章于 2022-05-21 18:07:15 发布

weixin_30505485

最新推荐文章于 2022-05-21 18:07:15 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/gb2013/archive/2012/12/08/2808921.html

版权

我们在做系统时，很多情况下都需要在页面中嵌套省市级联信息，网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序，其中数据文件是借用前人的工作成果(原作者网名为norkts，具体请参见 sitedata.js 文件头部的注释信息)。下面是页面源码：

 
   <!DOCTYPE html> 
   <html> 
   <head> 
       <title></title> 
       <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
   
    <script type="text/javascript" src="sitedata.js"> 
</script> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var provinceSelector = $("#provinceSelector"); 
            var citySelector = $("#citySelector"); 
            var areaSelector=$("#areaSelector"); 
            GetProvince(); 
            provinceSelector.change(function () { 
                var provinceName = provinceSelector.val(); 
                if (provinceName != '') { 
                    GetCity(provinceName); 
                    areaSelector.empty(); 
                } 
                else{ 
                    citySelector.empty(); 
                    areaSelector.empty(); 
                } 
            }); 
            citySelector.change(function () { 
                var provinceName = provinceSelector.val(); 
                var cityName = citySelector.val(); 
                if(cityName!=''){ 
                    GetArea(provinceName, cityName); 
                } 
                else{ 
                    areaSelector.empty(); 
                } 
            }); 
        }); 
   
        // 获取省份(直辖市)信息 
        function GetProvince() { 
            var provSelector = $("#provinceSelector"); 
            provSelector.empty(); 
            provSelector.append("<option value=''>--请选择--</option>"); 
            var arrProvince = provinceInfo; 
            for (var provinceIndex in arrProvince) { 
                provSelector.append("<option value='" + arrProvince[provinceIndex]["name"] + "'>" + arrProvince[provinceIndex]["name"] + "</option>") 
            } 
        } 
   
        // 获取指定省份(直辖市)的城市(辖区或县)信息 
        function GetCity(provinceName) { 
            var citySelector = $("#citySelector"); 
            var arrCity; 
            for (var provinceIndex in provinceInfo) { 
                if (provinceInfo[provinceIndex]["name"] == provinceName) { 
                    arrCity = provinceInfo[provinceIndex]["sub"]; 
                    break; 
                } 
            } 
            citySelector.empty(); 
            citySelector.append("<option value=''>--请选择--</option>") 
            for (var cityIndex in arrCity) { 
                citySelector.append("<option value='" + arrCity[cityIndex]["name"] + "'>" + arrCity[cityIndex]["name"] + "</option>") 
            } 
        } 
   
        // 获取指定城市(辖区或县)的地区信息 
        function GetArea(provinceName, cityName) { 
            var areaSelector = $("#areaSelector"); 
            var arrCity, arrArea; 
            for (var provinceIndex in provinceInfo) { 
                if (provinceInfo[provinceIndex]["name"] == provinceName) { 
                    arrCity = provinceInfo[provinceIndex]["sub"]; 
                    for (var cityIndex in arrCity) { 
                        if (arrCity[cityIndex]["name"] == cityName) { 
                            arrArea = arrCity[cityIndex]["sub"]; 
                            break; 
                        } 
                    } 
                } 
            } 
            areaSelector.empty(); 
            areaSelector.append("<option value=''>--请选择--</option>") 
            for (var areaIndex in arrArea) { 
                areaSelector.append("<option value='" + arrArea[areaIndex]["name"] + "'>" + arrArea[areaIndex]["name"] + "</option>") 
            } 
        } 
     
   </ 
   script 
   > 
   </head> 
   <body> 
   <div> 
       <select id="provinceSelector"></select> 
       <select id="citySelector"></select> 
       <select id="areaSelector"></select> 
   </div> 
   </body> 
   </html> 
  

其中 sitedata.js 中的数据采用了JSON格式保存，本人不才，级联操作写得不够优雅，本程序仅作示例，具体操作乡亲们请自行修改(^_^)。

附上源码如下：

文件图标点此下载示例源码

转载于:https://www.cnblogs.com/gb2013/archive/2012/12/08/2808921.html

weixin_30505485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript省市级联

我们在做系统时，很多情况下都需要在页面中嵌套省市级联信息，网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序，其中数据文件是借用前人的工作成果(原作者网名为norkts，具体请参见 sitedata.js 文件头部的注释信息)。下面是页面源码： <!DOCTYPE html> <html>...
复制链接

扫一扫