信息级联JavaScript省市级联

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

dyl_love98

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

阅读量348

点赞数

文章标签：信息级联

本文链接：https://blog.csdn.net/javablogs/article/details/8860417

版权

最近使用开发的过程中出现了一个小问题，顺便记录一下原因和方法--信息级联

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

 
  <!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[provinceIndex]["name"] + "'>" + arrProvince[provinceIndex]["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[provinceIndex]["name"] == provinceName) {   48:                     arrCity = provinceInfo[provinceIndex]["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[cityIndex]["name"] + "'>" + arrCity[cityIndex]["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[provinceIndex]["name"] == provinceName) {   65:                     arrCity = provinceInfo[provinceIndex]["sub"];   66:                     for (var cityIndex in arrCity) {   67:                         if (arrCity[cityIndex]["name"] == cityName) {   68:                             arrArea = arrCity[cityIndex]["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[areaIndex]["name"] + "'>" + arrArea[areaIndex]["name"] + "</option>")   78:             }   79:         }   80:     
</script>

</head> <body> <div>     <select id="provinceSelector"></select>     <select id="citySelector"></select>     <select id="areaSelector"></select> </div> </body> </html>
 
 

每日一道理
今天阳光很好，坐在窗前，看窗外如此晴朗的天感觉特别舒心，雨过天晴后的世界总给人一种明媚，仿佛阳光照耀在“心田”上空，让前些天被风雨践踏的花朵重新得到爱的关怀，重现生命的活力！

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

附上码源如下：

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

文章结束给大家分享下程序员的一些笑话语录：火车
一个年轻的程序员和一个项目经理登上了一列在山里行驶的火车，他们发现列车上几乎都坐满了，只有两个在一起的空位，这个空位的对面是一个老奶奶和一个年轻漂亮的姑娘。两个上前坐了下来。程序员和那个姑娘他们比较暧昧地相互看对方。这时，火车进入山洞，车厢里一片漆黑。此时，只听见一个亲嘴的声音，随后就听到一个响亮的巴掌声。很快火车出了山洞，他们四个人都不说话。
那个老奶奶在喃喃道， “这个年轻小伙怎么这么无礼，不过我很高兴我的孙女扇了一个巴掌”。
项目经理在想，“没想到这个程序员居然这么大胆，敢去亲那姑娘，只可惜那姑娘打错了人，居然给打了我。”
漂亮的姑娘想，“他亲了我真好，希望我的祖母没有打疼他”。
程序员坐在那里露出了笑容， “生活真好啊。这一辈子能有几次机会可以在亲一个美女的同时打项目经理一巴掌啊”