Tiramisu的Blog 发表于 2013-1-4 02:49:02

JavaScript省市级联

<div id="cnblogs_post_body">     我们在做系统时，很多情况下都需要在页面中嵌套省市级联信息，网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序，其中数据文件是借用前人的工作成果(原作者网名为norkts，具体请参见 sitedata.js 文件头部的注释信息)。下面是页面源码：
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; border-top: silver 1px solid; height: 272px; font-family: 'Courier New', courier, monospace; border-right: silver 1px solid; border-bottom: silver 1px solid; padding-bottom: 4px; direction: ltr; text-align: left; padding-top: 4px; padding-left: 4px; margin: 20px 0px 10px; border-left: silver 1px solid; line-height: 12pt; padding-right: 4px; max-height: 200px; width: 97.28%; background-color: #f4f4f4">   <div id="codeSnippet" style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">   <!DOCTYPE html>    <html>    <head>      <title></title>      <script type="text/javascript" src="jquery-1.8.3.min.js"></script>   1:     2:   <script type="text/javascript" src="sitedata.js">   1: </script>   2:   <script type="text/javascript">   3:         $(document).ready(function () {   4:             var provinceSelector = $("#provinceSelector");   5:             var citySelector = $("#citySelector");   6:             var areaSelector=$("#areaSelector");   7:             GetProvince();   8:             provinceSelector.change(function () {   9:               var provinceName = provinceSelector.val();10:               if (provinceName != '') {11:                     GetCity(provinceName);12:                     areaSelector.empty();13:               }14:               else{15:                     citySelector.empty();16:                     areaSelector.empty();17:               }18:             });19:             citySelector.change(function () {20:               var provinceName = provinceSelector.val();21:               var cityName = citySelector.val();22:               if(cityName!=''){23:                     GetArea(provinceName, cityName);24:               }25:               else{26:                     areaSelector.empty();27:               }28:             });29:         });30:  31:         // 获取省份(直辖市)信息32:         function GetProvince() {33:             var provSelector = $("#provinceSelector");34:             provSelector.empty();35:             provSelector.append("<option value=''>--请选择--</option>");36:             var arrProvince = provinceInfo;37:             for (var provinceIndex in arrProvince) {38:               provSelector.append("<option value='" + arrProvince["name"] + "'>" + arrProvince["name"] + "</option>")39:             }40:         }41:  42:         // 获取指定省份(直辖市)的城市(辖区或县)信息43:         function GetCity(provinceName) {44:             var citySelector = $("#citySelector");45:             var arrCity;46:             for (var provinceIndex in provinceInfo) {47:               if (provinceInfo["name"] == provinceName) {48:                     arrCity = provinceInfo["sub"];49:                     break;50:               }51:             }52:             citySelector.empty();53:             citySelector.append("<option value=''>--请选择--</option>")54:             for (var cityIndex in arrCity) {55:               citySelector.append("<option value='" + arrCity["name"] + "'>" + arrCity["name"] + "</option>")56:             }57:         }58:  59:         // 获取指定城市(辖区或县)的地区信息60:         function GetArea(provinceName, cityName) {61:             var areaSelector = $("#areaSelector");62:             var arrCity, arrArea;63:             for (var provinceIndex in provinceInfo) {64:               if (provinceInfo["name"] == provinceName) {65:                     arrCity = provinceInfo["sub"];66:                     for (var cityIndex in arrCity) {67:                         if (arrCity["name"] == cityName) {68:                           arrArea = arrCity["sub"];69:                           break;70:                         }71:                     }72:               }73:             }74:             areaSelector.empty();75:             areaSelector.append("<option value=''>--请选择--</option>")76:             for (var areaIndex in arrArea) {77:               areaSelector.append("<option value='" + arrArea["name"] + "'>" + arrArea["name"] + "</option>")78:             }79:         }80:   </script>    </head>    <body>    <div>      <select id="provinceSelector"></select>      <select id="citySelector"></select>      <select id="areaSelector"></select>    </div>    </body>    </html>
页: [1]
查看完整版本: JavaScript省市级联