信息级联JavaScript省市级联

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

     我们在做统系时,很多情况下都需要在面页中嵌套省市级联信息,网上找到的范例大多省市信息够不整完或是级联操纵过于杂复。这一篇我也宣布一个省市级联示例程序,其中数据文件是借用人前的工作成果(原作者网名为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格式保存,本人才不,级联操纵写得够不优雅,本程序仅作示例,详细操纵乡亲们请自行修改(^_^)。

    附上码源如下:

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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值