四级无刷新联动下拉框"/>
使用 AjaxPro 开发四级无刷新联动下拉框
开发环境 VS.NET 2005 C# Oracle AjaxPro
最近忙没时间详细解释，先把通用的源码贴出自己看。
出于对性能的考虑，把省市两级写成JS数组，把县区（镇）两级写在 Oracle 里。通过 JS 触发 C# 去读取数据库，然后将数据回传给 JS ，再绑定显示。
操作 <select> 采用更通用的 createElement() 而没有使用 options.add()
<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Area.aspx.cs " Inherits = " Area " %>
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " .dtd " >
< html xmlns = " " >
< head runat = " server " >
< title > 地区 </ title >
</ head >
< body >
< form id = " form1 " runat = " server " >
< table >
< tr >
< td >
< select id = " SF " >
< option selected = " selected " > —请选择— </ option >
</ select >
</ td >
< td >
< select id = " CS " >
< option selected = " selected " > —请选择— </ option >
</ select >
</ td >
< td >
< select id = " Xian " >
< option selected = " selected " > —请选择— </ option >
</ select >
</ td >
< td >
< select id = " Zhen " >
< option selected = " selected " > —请选择— </ option >
</ select >
</ td >
</ tr >
</ table >
< script type = " text/javascript " >
var aDQ = new Array(); // id 城市名 所属省份id 域名
aDQ[ 0 ] = [ " 11 " , " 北京 " , " 0 " , " bj " ];
aDQ[ 1 ] = [ " 12 " , " 天津 " , " 0 " , " tj " ];
aDQ[ 2 ] = [ " 13 " , " 河北 " , " 0 " , " hb " ];
aDQ[ 3 ] = [ " 14 " , " 山西 " , " 0 " , " shang " ];
aDQ[ 4 ] = [ " 15 " , " 内蒙古 " , " 0 " , " nmg " ];
aDQ[ 5 ] = [ " 21 " , " 辽宁 " , " 0 " , " ln " ];
aDQ[ 6 ] = [ " 22 " , " 吉林 " , " 0 " , " jl " ];
aDQ[ 7 ] = [ " 23 " , " 黑龙江 " , " 0 " , " hlj " ];
aDQ[ 8 ] = [ " 31 " , " 上海 " , " 0 " , " sh " ];
aDQ[ 9 ] = [ " 32 " , " 江苏 " , " 0 " , " js " ];
aDQ[ 10 ] = [ " 33 " , " 浙江 " , " 0 " , " zhej " ];
aDQ[ 11 ] = [ " 34 " , " 安徽 " , " 0 " , " ah " ];
aDQ[ 12 ] = [ " 35 " , " 福建 " , " 0 " , " fj " ];
aDQ[ 13 ] = [ " 36 " , " 江西 " , " 0 " , " jw " ];
aDQ[ 14 ] = [ " 37 " , " 山东 " , " 0 " , " sd " ];
aDQ[ 15 ] = [ " 41 " , " 河南 " , " 0 " , " he " ];
aDQ[ 16 ] = [ " 42 " , " 湖北 " , " 0 " , " hu " ];
aDQ[ 17 ] = [ " 43 " , " 湖南 " , " 0 " , " hn " ];
aDQ[ 18 ] = [ " 44 " , " 广东 " , " 0 " , " gd " ];
aDQ[ 19 ] = [ " 45 " , " 广西 " , " 0 " , " gx " ];
aDQ[ 20 ] = [ " 46 " , " 海南 " , " 0 " , " hain " ];
aDQ[ 21 ] = [ " 50 " , " 重庆 " , " 0 " , " cq " ];
aDQ[ 22 ] = [ " 51 " , " 四川 " , " 0 " , " sc " ];
aDQ[ 23 ] = [ " 52 " , " 贵州 " , " 0 " , " gui " ];
aDQ[ 24 ] = [ " 53 " , " 云南 " , " 0 " , " yn " ];
aDQ[ 25 ] = [ " 54 " , " 西藏 " , " 0 " , " wc " ];
aDQ[ 26 ] = [ " 61 " , " 陕西 " , " 0 " , " shangx " ];
aDQ[ 27 ] = [ " 62 " , " 甘肃 " , " 0 " , " gs " ];
aDQ[ 28 ] = [ " 63 " , " 青海 " , " 0 " , " qh " ];
aDQ[ 29 ] = [ " 64 " , " 宁夏 " , " 0 " , " nx " ];
aDQ[ 30 ] = [ " 65 " , " 新疆 " , " 0 " , " xj " ];
aDQ[ 31 ] = [ " 71 " , " 台湾 " , " 0 " , " tw " ];
aDQ[ 32 ] = [ " 81 " , " 香港 " , " 0 " , " xg " ];
aDQ[ 33 ] = [ " 82 " , " 澳门 " , " 0 " , " am " ];
aDQ[ 34 ] = [ " 1101 " , " 北京城区 " , " 11 " , " bjcq " ];
aDQ[ 35 ] = [ " 1102 " , " 北京县区 " , " 11 " , " bjxq " ];
aDQ[ 36 ] = [ " 1201 " , " 天津城区 " , " 12 " , " tjcq " ];
aDQ[ 37 ] = [ " 1202 " , " 天津县区 " , " 12 " , " tjxq " ];
aDQ[ 38 ] = [ " 1301 " , " 石家庄 " , " 13 " , " sjz " ];
aDQ[ 39 ] = [ " 1302 " , " 唐山 " , " 13 " , " hbts " ];
aDQ[ 40 ] = [ " 1303 " , " 秦皇岛 " , " 13 " , " qhd " ];
aDQ[ 41 ] = [ " 1304 " , " 邯郸 " , " 13 " , " hd " ];
aDQ[ 42 ] = [ " 1305 " , " 邢台 " , " 13 " , " hbxt " ];
aDQ[ 43 ] = [ " 1306 " , " 保定 " , " 13 " , " bd " ];
aDQ[ 44 ] = [ " 1307 " , " 张家口 " , " 13 " , " zjk " ];
aDQ[ 45 ] = [ " 1308 " , " 承德 " , " 13 " , " cd " ];
aDQ[ 46 ] = [ " 1309 " , " 沧州 " , " 13 " , " hbcz " ];
aDQ[ 47 ] = [ " 1310 " , " 廊坊 " , " 13 " , " lf " ];
aDQ[ 48 ] = [ " 1311 " , " 衡水 " , " 13 " , " hbhs " ];
aDQ[ 49 ] = [ " 1401 " , " 太原 " , " 14 " , " ty " ];
aDQ[ 50 ] = [ " 1402 " , " 大同 " , " 14 " , " dt " ];
aDQ[ 51 ] = [ " 1403 " , " 阳泉 " , " 14 " , " yq " ];
aDQ[ 52 ] = [ " 1404 " , " 长治 " , " 14 " , " swcz " ];
aDQ[ 53 ] = [ " 1405 " , " 晋城 " , " 14 " , " swjc " ];
aDQ[ 54 ] = [ " 1406 " , " 朔州 " , " 14 " , " swsz " ];
aDQ[ 55 ] = [ " 1501 " , " 呼和浩特 " , " 15 " , " hhht " ];
aDQ[ 56 ] = [ " 1502 " , " 包头 " , " 15 " , " bt " ];
aDQ[ 57 ] = [ " 1503 " , " 乌海 " , " 15 " , " nmgwh " ];
aDQ[ 58 ] = [ " 1504 " , " 赤峰 " , " 15 " , " cf " ];
aDQ[ 59 ] = [ " 1521 " , " 呼伦贝尔盟 " , " 15 " , " hlbem " ];
aDQ[ 60 ] = [ " 1522 " , " 兴安盟 " , " 15 " , " xam " ];
aDQ[ 61 ] = [ " 1523 " , " 哲里木盟 " , " 15 " , " zlmm " ];
aDQ[ 62 ] = [ " 1525 " , " 锡林郭勒盟 " , " 15 " , " wlglm " ];
aDQ[ 63 ] = [ " 1526 " , " 乌兰察布盟 " , " 15 " , " wlcbm " ];
aDQ[ 64 ] = [ " 1527 " , " 鄂尔多斯 " , " 15 " , " eeds " ];
aDQ[ 65 ] = [ " 1528 " , " 巴彦淖尔盟 " , " 15 " , " bynem " ];
aDQ[ 66 ] = [ " 1529 " , " 阿拉善盟 " , " 15 " , " alsm " ];
aDQ[ 67 ] = [ " 2101 " , " 沈阳 " , " 21 " , " lnsy " ];
aDQ[ 68 ] = [ " 2102 " , " 大连 " , " 21 " , " dl " ];
aDQ[ 69 ] = [ " 2103 " , " 鞍山 " , " 21 " , " as " ];
aDQ[ 70 ] = [ " 2104 " , " 抚顺 " , " 21 " , " lnfs " ];
aDQ[ 71 ] = [ " 2105 " , " 本溪 " , " 21 " , " bx " ];
aDQ[ 72 ] = [ " 2106 " , " 丹东 " , " 21 " , " dd " ];
aDQ[ 73 ] = [ " 2107 " , " 锦州 " , " 21 " , " jz " ];
aDQ[ 74 ] = [ " 2108 " , " 营口 " , " 21 " , " yk " ];
aDQ[ 75 ] = [ " 2109 " , " 阜新 " , " 21 " , " fx " ];
aDQ[ 76 ] = [ " 2110 " , " 辽阳 " , " 21 " , " lnly " ];
aDQ[ 77 ] = [ " 2111 " , " 盘锦 " , " 21 " , " pj " ];
aDQ[ 78 ] = [ " 2112 " , " 铁岭 " , " 21 " , " lntl " ];
aDQ[ 79 ] = [ " 2113 " , " 朝阳 " , " 21 " , " cy " ];
aDQ[ 80 ] = [ " 2114 " , " 葫芦岛 " , " 21 " , " hld " ];
aDQ[ 81 ] = [ " 2201 " , " 长春 " , " 22 " , " cc " ];
aDQ[ 82 ] = [ " 2202 " , " 吉林 " , " 22 " , " jljl " ];
aDQ[ 83 ] = [ " 2203 " , " 四平 " , " 22 " , " sp " ];
aDQ[ 84 ] = [ " 2204 " , " 辽源 " , " 22 " , " jlly " ];
aDQ[ 85 ] = [ " 2205 " , " 通化 " , " 22 " , " th " ];
aDQ[ 86 ] = [ " 2206 " , " 白山 " , " 22 " , " bs " ];
aDQ[ 87 ] = [ " 2207 " , " 松原 " , " 22 " , " jlsy " ];
aDQ[ 88 ] = [ " 2208 " , " 白城 " , " 22 " , " bc " ];
aDQ[ 89 ] = [ " 2224 " , " 延边 " , " 22 " , " jlyb " ];
aDQ[ 90 ] = [ " 2301 " , " 哈尔滨 " , " 23 " , " heb " ];
aDQ[ 91 ] = [ " 2302 " , " 齐齐哈尔 " , " 23 " , " qqhe " ];
aDQ[ 92 ] = [ " 2303 " , " 鸡西 " , " 23 " , " hljjw " ];
aDQ[ 93 ] = [ " 2304 " , " 鹤岗 " , " 23 " , " hg " ];
aDQ[ 94 ] = [ " 2305 " , " 双鸭山 " , " 23 " , " sys " ];
aDQ[ 95 ] = [ " 2306 " , " 大庆 " , " 23 " , " dq " ];
aDQ[ 96 ] = [ " 2307 " , " 伊春 " , " 23 " , " hljyc " ];
aDQ[ 97 ] = [ " 2308 " , " 佳木斯 " , " 23 " , " jms " ];
aDQ[ 98 ] = [ " 2309 " , " 七台河 " , " 23 " , " qth " ];
aDQ[ 99 ] = [ " 2310 " , " 牡丹江 " , " 23 " , " mdj " ];
aDQ[ 100 ] = [ " 2311 " , " 黑河 " , " 23 " , " hh " ];
aDQ[ 101 ] = [ " 3101 " , " 上海市区 " , " 31 " , " shsq " ];
aDQ[ 102 ] = [ " 3102 " , " 上海县区 " , " 31 " , " shxq " ];
aDQ[ 103 ] = [ " 3201 " , " 南京 " , " 32 " , " nj " ];
aDQ[ 104 ] = [ " 3202 " , " 无锡 " , " 32 " , " ww " ];
aDQ[ 105 ] = [ " 3203 " , " 徐州 " , " 32 " , " xz " ];
aDQ[ 106 ] = [ " 3204 " , " 常州 " , " 32 " , " jscz " ];
aDQ[ 107 ] = [ " 3205 " , " 苏州 " , " 32 " , " shu " ];
aDQ[ 108 ] = [ " 3206 " , " 南通 " , " 32 " , " nt " ];
aDQ[ 109 ] = [ " 3207 " , " 连云港 " , " 32 " , " lyg " ];
aDQ[ 110 ] = [ " 3208 " , " 淮安 " , " 32 " , " ha " ];
aDQ[ 111 ] = [ " 3209 " , " 盐城 " , " 32 " , " jsyc " ];
aDQ[ 112 ] = [ " 3210 " , " 扬州 " , " 32 " , " yz " ];
aDQ[ 113 ] = [ " 3211 " , " 镇江 " , " 32 " , " jszj " ];
aDQ[ 114 ] = [ " 3212 " , " 泰州 " , " 32 " , " tz " ];
aDQ[ 115 ] = [ " 3213 " , " 宿迁 " , " 32 " , " sq " ];
aDQ[ 116 ] = [ " 3301 " , " 杭州 " , " 33 " , " han " ];
aDQ[ 117 ] = [ " 3302 " , " 宁波 " , " 33 " , " nb " ];
aDQ[ 118 ] = [ " 3303 " , " 温州 " , " 33 " , " zjwz " ];
aDQ[ 119 ] = [ " 3304 " , " 嘉兴 " , " 33 " , " jx " ];
aDQ[ 120 ] = [ " 3305 " , " 湖州 " , " 33 " , " zjhz " ];
aDQ[ 121 ] = [ " 3306 " , " 绍兴 " , " 33 " , " sx " ];
aDQ[ 122 ] = [ " 3307 " , " 金华 " , " 33 " , " jh " ];
aDQ[ 123 ] = [ " 3308 " , " 衢州 " , " 33 " , " zjqz " ];
aDQ[ 124 ] = [ " 3309 " , " 舟山 " , " 33 " , " zjzs " ];
aDQ[ 125 ] = [ " 3310 " , " 台州 " , " 33 " , " zjtz " ];
aDQ[ 126 ] = [ " 3311 " , " 义乌 " , " 33 " , " yw " ];
aDQ[ 127 ] = [ " 3325 " , " 丽水 " , " 33 " , " zjls " ];
aDQ[ 128 ] = [ " 3401 " , " 合肥 " , " 34 " , " hf " ];
aDQ[ 129 ] = [ " 3402 " , " 芜湖 " , " 34 " , " wh " ];
aDQ[ 130 ] = [ " 3403 " , " 蚌埠 " , " 34 " , " bb " ];
aDQ[ 131 ] = [ " 3404 " , " 淮南 " , " 34 " , " hnx " ];
aDQ[ 132 ] = [ " 3405 " , " 马鞍山 " , " 34 " , " mas " ];
aDQ[ 133 ] = [ " 3406 " , " 淮北 " , " 34 " , " huib " ];
aDQ[ 134 ] = [ " 3407 " , " 铜陵 " , " 34 " , " tl " ];
aDQ[ 135 ] = [ " 3408 " , " 安庆 " , " 34 " , " aq " ];
aDQ[ 136 ] = [ " 3410 " , " 黄山 " , " 34 " , " hs " ];
aDQ[ 137 ] = [ " 3411 " , " 滁州 " , " 34 " , " ahcz " ];
aDQ[ 138 ] = [ " 3412 " , " 阜阳 " , " 34 " , " fy " ];
aDQ[ 139 ] = [ " 3413 " , " 宿州 " , " 34 " , " ahsz " ];
aDQ[ 140 ] = [ " 3416 " , " 毫州 " , " 34 " , " ahhz " ];
aDQ[ 141 ] = [ " 51011117 " , " 池州 " , " 34 " , "" ];
aDQ[ 142 ] = [ " 51011118 " , " 六安 " , " 34 " , "" ];
aDQ[ 143 ] = [ " 51011119 " , " 宣城 " , " 34 " , "" ];
aDQ[ 144 ] = [ " 3501 " , " 福州 " , " 35 " , " fz " ];
aDQ[ 145 ] = [ " 3502 " , " 厦门 " , " 35 " , " xm " ];
aDQ[ 146 ] = [ " 3503 " , " 莆田 " , " 35 " , " pt " ];
aDQ[ 147 ] = [ " 3504 " , " 三明 " , " 35 " , " sm " ];
aDQ[ 148 ] = [ " 3505 " , " 泉州 " , " 35 " , " qz " ];
aDQ[ 149 ] = [ " 3506 " , " 漳州 " , " 35 " , " fzz " ];
aDQ[ 150 ] = [ " 3507 " , " 南平 " , " 35 " , " np " ];
aDQ[ 151 ] = [ " 3508 " , " 龙岩 " , " 35 " , " fjly " ];
aDQ[ 152 ] = [ " 3509 " , " 宁德 " , " 35 " , " fjnd " ];
aDQ[ 153 ] = [ " 3601 " , " 南昌 " , " 36 " , " jwnc " ];
aDQ[ 154 ] = [ " 3602 " , " 景德镇 " , " 36 " , " jdz " ];
aDQ[ 155 ] = [ " 3603 " , " 萍乡 " , " 36 " , " px " ];
aDQ[ 156 ] = [ " 3604 " , " 九江 " , " 36 " , " jj " ];
aDQ[ 157 ] = [ " 3605 " , " 新余 " , " 36 " , " xy " ];
aDQ[ 158 ] = [ " 3606 " , " 鹰潭 " , " 36 " , " jwyt " ];
aDQ[ 159 ] = [ " 3607 " , " 赣州 " , " 36 " , " jwgz " ];
aDQ[ 160 ] = [ " 3701 " , " 济南 " , " 37 " , " jn " ];
aDQ[ 161 ] = [ " 3702 " , " 青岛 " , " 37 " , " qd " ];
aDQ[ 162 ] = [ " 3703 " , " 淄博 " , " 37 " , " zb " ];
aDQ[ 163 ] = [ " 3704 " , " 枣庄 " , " 37 " , " sdzz " ];
aDQ[ 164 ] = [ " 3705 " , " 东营 " , " 37 " , " sddy " ];
aDQ[ 165 ] = [ " 3706 " , " 烟台 " , " 37 " , " yt " ];
aDQ[ 166 ] = [ " 3707 " , " 潍坊 " , " 37 " , " wf " ];
aDQ[ 167 ] = [ " 3708 " , " 济宁 " , " 37 " , " sdjn " ];
aDQ[ 168 ] = [ " 3709 " , " 泰安 " , " 37 " , " ta " ];
aDQ[ 169 ] = [ " 3710 " , " 威海 " , " 37 " , " sdwh " ];
aDQ[ 170 ] = [ " 3711 " , " 日照 " , " 37 " , " rz " ];
aDQ[ 171 ] = [ " 3712 " , " 莱芜 " , " 37 " , " lw " ];
aDQ[ 172 ] = [ " 3713 " , " 临沂 " , " 37 " , " ly " ];
aDQ[ 173 ] = [ " 3714 " , " 德州 " , " 37 " , " sddz " ];
aDQ[ 174 ] = [ " 3715 " , " 聊城 " , " 37 " , " lc " ];
aDQ[ 175 ] = [ " 4101 " , " 郑州 " , " 41 " , " zhen " ];
aDQ[ 176 ] = [ " 4102 " , " 开封 " , " 41 " , " kf " ];
aDQ[ 177 ] = [ " 4103 " , " 洛阳 " , " 41 " , " hnly " ];
aDQ[ 178 ] = [ " 4104 " , " 平顶山 " , " 41 " , " pds " ];
aDQ[ 179 ] = [ " 4105 " , " 安阳 " , " 41 " , " ay " ];
aDQ[ 180 ] = [ " 4106 " , " 鹤壁 " , " 41 " , " hebi " ];
aDQ[ 181 ] = [ " 4107 " , " 新乡 " , " 41 " , " xx " ];
aDQ[ 182 ] = [ " 4108 " , " 焦作 " , " 41 " , " hnjz " ];
aDQ[ 183 ] = [ " 4109 " , " 濮阳 " , " 41 " , " zy " ];
aDQ[ 184 ] = [ " 4110 " , " 许昌 " , " 41 " , " xc " ];
aDQ[ 185 ] = [ " 4111 " , " 漯河 " , " 41 " , " zhe " ];
aDQ[ 186 ] = [ " 4112 " , " 三门峡 " , " 41 " , " smx " ];
aDQ[ 187 ] = [ " 4113 " , " 南阳 " , " 41 " , " ny " ];
aDQ[ 188 ] = [ " 4114 " , " 商丘 " , " 41 " , " hnsq " ];
aDQ[ 189 ] = [ " 4115 " , " 信阳 " , " 41 " , " hnxy " ];
aDQ[ 190 ] = [ " 4201 " , " 武汉 " , " 42 " , " hbwh " ];
aDQ[ 191 ] = [ " 4202 " , " 黄石 " , " 42 " , " hhs " ];
aDQ[ 192 ] = [ " 4203 " , " 十堰 " , " 42 " , " sy " ];
aDQ[ 193 ] = [ " 4205 " , " 宜昌 " , " 42 " , " hbyc " ];
aDQ[ 194 ] = [ " 4206 " , " 襄樊 " , " 42 " , " xf " ];
aDQ[ 195 ] = [ " 4207 " , " 鄂州 " , " 42 " , " ez " ];
aDQ[ 196 ] = [ " 4208 " , " 荆门 " , " 42 " , " hbjm " ];
aDQ[ 197 ] = [ " 4209 " , " 孝感 " , " 42 " , " hbxg " ];
aDQ[ 198 ] = [ " 4210 " , " 荆州 " , " 42 " , " hbjz " ];
aDQ[ 199 ] = [ " 4211 " , " 黄冈 " , " 42 " , " hbhg " ];
aDQ[ 200 ] = [ " 4212 " , " 咸宁 " , " 42 " , " xn " ];
aDQ[ 201 ] = [ " 4228 " , " 恩施 " , " 42 " , " es " ];
aDQ[ 202 ] = [ " 4301 " , " 长沙 " , " 43 " , " cs " ];
aDQ[ 203 ] = [ " 4302 " , " 株洲 " , " 43 " , " hnzz " ];
aDQ[ 204 ] = [ " 4303 " , " 湘潭 " , " 43 " , " xt " ];
aDQ[ 205 ] = [ " 4304 " , " 衡阳 " , " 43 " , " hnhy " ];
aDQ[ 206 ] = [ " 4305 " , " 邵阳 " , " 43 " , " shao " ];
aDQ[ 207 ] = [ " 4306 " , " 岳阳 " , " 43 " , " yy " ];
aDQ[ 208 ] = [ " 4307 " , " 常德 " , " 43 " , " hncd " ];
aDQ[ 209 ] = [ " 4308 " , " 张家界 " , " 43 " , " zjj " ];
aDQ[ 210 ] = [ " 4309 " , " 益阳 " , " 43 " , " hnyy " ];
aDQ[ 211 ] = [ " 4310 " , " 郴州 " , " 43 " , " hncz " ];
aDQ[ 212 ] = [ " 4311 " , " 永州 " , " 43 " , " hnyz " ];
aDQ[ 213 ] = [ " 4312 " , " 怀化 " , " 43 " , " hnhh " ];
aDQ[ 214 ] = [ " 4331 " , " 湘西 " , " 43 " , " xw " ];
aDQ[ 215 ] = [ " 4401 " , " 广州 " , " 44 " , " gz " ];
aDQ[ 216 ] = [ " 4402 " , " 韶关 " , " 44 " , " sg " ];
aDQ[ 217 ] = [ " 4403 " , " 深圳 " , " 44 " , " sz " ];
aDQ[ 218 ] = [ " 4404 " , " 珠海 " , " 44 " , " zh " ];
aDQ[ 219 ] = [ " 4405 " , " 汕头 " , " 44 " , " st " ];
aDQ[ 220 ] = [ " 4406 " , " 佛山 " , " 44 " , " fs " ];
aDQ[ 221 ] = [ " 4407 " , " 江门 " , " 44 " , " jm " ];
aDQ[ 222 ] = [ " 4408 " , " 湛江 " , " 44 " , " zj " ];
aDQ[ 223 ] = [ " 4409 " , " 茂名 " , " 44 " , " mm " ];
aDQ[ 224 ] = [ " 4412 " , " 肇庆 " , " 44 " , " zq " ];
aDQ[ 225 ] = [ " 4413 " , " 惠州 " , " 44 " , " hz " ];
aDQ[ 226 ] = [ " 4414 " , " 梅州 " , " 44 " , " mz " ];
aDQ[ 227 ] = [ " 4415 " , " 汕尾 " , " 44 " , " shanw " ];
aDQ[ 228 ] = [ " 4416 " , " 河源 " , " 44 " , " hy " ];
aDQ[ 229 ] = [ " 4417 " , " 阳江 " , " 44 " , " yj " ];
aDQ[ 230 ] = [ " 4418 " , " 清远 " , " 44 " , " qy " ];
aDQ[ 231 ] = [ " 4419 " , " 东莞 " , " 44 " , " dz " ];
aDQ[ 232 ] = [ " 4420 " , " 中山 " , " 44 " , " zs " ];
aDQ[ 233 ] = [ " 4451 " , " 潮州 " , " 44 " , " cz " ];
aDQ[ 234 ] = [ " 4452 " , " 揭阳 " , " 44 " , " jy " ];
aDQ[ 235 ] = [ " 4453 " , " 云浮 " , " 44 " , " yf " ];
aDQ[ 236 ] = [ " 4501 " , " 南宁 " , " 45 " , " nn " ];
aDQ[ 237 ] = [ " 4502 " , " 柳州 " , " 45 " , " lz " ];
aDQ[ 238 ] = [ " 4503 " , " 桂林 " , " 45 " , " gwgl " ];
aDQ[ 239 ] = [ " 4504 " , " 梧州 " , " 45 " , " gwwz " ];
aDQ[ 240 ] = [ " 4505 " , " 北海 " , " 45 " , " bh " ];
aDQ[ 241 ] = [ " 4506 " , " 防城港 " , " 45 " , " fcg " ];
aDQ[ 242 ] = [ " 4507 " , " 钦州 " , " 45 " , " gqz " ];
aDQ[ 243 ] = [ " 4508 " , " 贵港 " , " 45 " , " gg " ];
aDQ[ 244 ] = [ " 4509 " , " 玉林 " , " 45 " , " yl " ];
aDQ[ 245 ] = [ " 4601 " , " 海口 " , " 46 " , " hk " ];
aDQ[ 246 ] = [ " 4602 " , " 三亚 " , " 46 " , " hnsy " ];
aDQ[ 247 ] = [ " 5002 " , " 重庆县区 " , " 50 " , " zqxq " ];
aDQ[ 248 ] = [ " 5003 " , " 重庆城区 " , " 50 " , " zqcq " ];
aDQ[ 249 ] = [ " 5101 " , " 成都 " , " 51 " , " sccd " ];
aDQ[ 250 ] = [ " 5103 " , " 自贡 " , " 51 " , " zg " ];
aDQ[ 251 ] = [ " 5104 " , " 攀枝花 " , " 51 " , " pzh " ];
aDQ[ 252 ] = [ " 5105 " , " 泸州 " , " 51 " , " sczz " ];
aDQ[ 253 ] = [ " 5106 " , " 德阳 " , " 51 " , " dy " ];
aDQ[ 254 ] = [ " 5107 " , " 绵阳 " , " 51 " , " my " ];
aDQ[ 255 ] = [ " 5108 " , " 广元 " , " 51 " , " gy " ];
aDQ[ 256 ] = [ " 5109 " , " 遂宁 " , " 51 " , " sn " ];
aDQ[ 257 ] = [ " 5110 " , " 内江 " , " 51 " , " scnj " ];
aDQ[ 258 ] = [ " 5111 " , " 乐山 " , " 51 " , " ls " ];
aDQ[ 259 ] = [ " 5113 " , " 南充 " , " 51 " , " nc " ];
aDQ[ 260 ] = [ " 5115 " , " 宜宾 " , " 51 " , " yb " ];
aDQ[ 261 ] = [ " 5116 " , " 广安 " , " 51 " , " ga " ];
aDQ[ 262 ] = [ " 5130 " , " 达州 " , " 51 " , " scdz " ];
aDQ[ 263 ] = [ " 5132 " , " 阿坝 " , " 51 " , " ab " ];
aDQ[ 264 ] = [ " 5133 " , " 甘孜 " , " 51 " , " scgz " ];
aDQ[ 265 ] = [ " 5134 " , " 凉山 " , " 51 " , " scls " ];
aDQ[ 266 ] = [ " 5201 " , " 贵阳 " , " 52 " , " gzgy " ];
aDQ[ 267 ] = [ " 5202 " , " 六盘水 " , " 52 " , " lps " ];
aDQ[ 268 ] = [ " 5203 " , " 遵义 " , " 52 " , " gzzy " ];
aDQ[ 269 ] = [ " 5223 " , " 黔西南 " , " 52 " , " qwn " ];
aDQ[ 270 ] = [ " 5226 " , " 黔东南 " , " 52 " , " qdn " ];
aDQ[ 271 ] = [ " 5227 " , " 黔南 " , " 52 " , " qn " ];
aDQ[ 272 ] = [ " 5301 " , " 昆明 " , " 53 " , " km " ];
aDQ[ 273 ] = [ " 5303 " , " 曲靖 " , " 53 " , " qj " ];
aDQ[ 274 ] = [ " 5304 " , " 玉溪 " , " 53 " , " yx " ];
aDQ[ 275 ] = [ " 5323 " , " 楚雄 " , " 53 " , " cx " ];
aDQ[ 276 ] = [ " 5325 " , " 红河 " , " 53 " , " ynhh " ];
aDQ[ 277 ] = [ " 5326 " , " 文山 " , " 53 " , " ws " ];
aDQ[ 278 ] = [ " 5328 " , " 西双版纳 " , " 53 " , " wsbn " ];
aDQ[ 279 ] = [ " 5329 " , " 大理 " , " 53 " , " yndl " ];
aDQ[ 280 ] = [ " 5331 " , " 德宏 " , " 53 " , " dh " ];
aDQ[ 281 ] = [ " 5333 " , " 怒江 " , " 53 " , " nuj " ];
aDQ[ 282 ] = [ " 5334 " , " 迪庆 " , " 53 " , " yndq " ];
aDQ[ 283 ] = [ " 51010963 " , " 丽江市 " , " 53 " , " ljs " ];
aDQ[ 284 ] = [ " 51012663 " , " 保山 " , " 53 " , "" ];
aDQ[ 285 ] = [ " 5401 " , " 拉萨 " , " 54 " , " wcls " ];
aDQ[ 286 ] = [ " 6101 " , " 西安 " , " 61 " , " wa " ];
aDQ[ 287 ] = [ " 6102 " , " 铜川 " , " 61 " , " tc " ];
aDQ[ 288 ] = [ " 6103 " , " 宝鸡 " , " 61 " , " swbj " ];
aDQ[ 289 ] = [ " 6104 " , " 咸阳 " , " 61 " , " swxy " ];
aDQ[ 290 ] = [ " 6105 " , " 渭南 " , " 61 " , " swwn " ];
aDQ[ 291 ] = [ " 6106 " , " 延安 " , " 61 " , " ya " ];
aDQ[ 292 ] = [ " 6107 " , " 汉中 " , " 61 " , " swhz " ];
aDQ[ 293 ] = [ " 6201 " , " 兰州 " , " 62 " , " gslz " ];
aDQ[ 294 ] = [ " 6202 " , " 嘉峪关 " , " 62 " , " jyg " ];
aDQ[ 295 ] = [ " 6203 " , " 金昌 " , " 62 " , " jc " ];
aDQ[ 296 ] = [ " 6204 " , " 白银 " , " 62 " , " by " ];
aDQ[ 297 ] = [ " 6205 " , " 天水 " , " 62 " , " ts " ];
aDQ[ 298 ] = [ " 6229 " , " 临夏 " , " 62 " , " lx " ];
aDQ[ 299 ] = [ " 6230 " , " 甘南 " , " 62 " , " gn " ];
aDQ[ 300 ] = [ " 6301 " , " 西宁 " , " 63 " , " wn " ];
aDQ[ 301 ] = [ " 6322 " , " 海北 " , " 63 " , " hai " ];
aDQ[ 302 ] = [ " 6323 " , " 黄南 " , " 63 " , " huang " ];
aDQ[ 303 ] = [ " 6325 " , " 海南 " , " 63 " , " qhhn " ];
aDQ[ 304 ] = [ " 6326 " , " 果洛 " , " 63 " , " gl " ];
aDQ[ 305 ] = [ " 6327 " , " 玉树 " , " 63 " , " ys " ];
aDQ[ 306 ] = [ " 6328 " , " 海西 " , " 63 " , " hw " ];
aDQ[ 307 ] = [ " 6401 " , " 银川 " , " 64 " , " yc " ];
aDQ[ 308 ] = [ " 6402 " , " 石嘴山 " , " 64 " , " szs " ];
aDQ[ 309 ] = [ " 6403 " , " 吴忠 " , " 64 " , " wz " ];
aDQ[ 310 ] = [ " 6405 " , " 中卫 " , " 64 " , " zw " ];
aDQ[ 311 ] = [ " 6501 " , " 乌鲁木齐 " , " 65 " , " wlmq " ];
aDQ[ 312 ] = [ " 6502 " , " 克拉玛依 " , " 65 " , " klmy " ];
aDQ[ 313 ] = [ " 6523 " , " 昌吉 " , " 65 " , " cj " ];
aDQ[ 314 ] = [ " 6527 " , " 博尔塔拉 " , " 65 " , " betl " ];
aDQ[ 315 ] = [ " 6528 " , " 巴音郭楞 " , " 65 " , " bygl " ];
aDQ[ 316 ] = [ " 6530 " , " 克孜勒苏柯尔克孜 " , " 65 " , " kzlskekz " ];
aDQ[ 317 ] = [ " 6540 " , " 伊犁 " , " 65 " , " xjyl " ];
aDQ[ 318 ] = [ " 7101 " , " 台北 " , " 71 " , "" ];
aDQ[ 319 ] = [ " 7102 " , " 宜兰 " , " 71 " , "" ];
aDQ[ 320 ] = [ " 7103 " , " 桃园 " , " 71 " , "" ];
aDQ[ 321 ] = [ " 7104 " , " 新竹 " , " 71 " , "" ];
aDQ[ 322 ] = [ " 7105 " , " 苗栗 " , " 71 " , "" ];
aDQ[ 323 ] = [ " 7106 " , " 台中 " , " 71 " , "" ];
aDQ[ 324 ] = [ " 7107 " , " 彰化 " , " 71 " , "" ];
aDQ[ 325 ] = [ " 7108 " , " 南投 " , " 71 " , "" ];
aDQ[ 326 ] = [ " 7109 " , " 云林 " , " 71 " , "" ];
aDQ[ 327 ] = [ " 7110 " , " 嘉义 " , " 71 " , "" ];
aDQ[ 328 ] = [ " 7111 " , " 台南 " , " 71 " , "" ];
aDQ[ 329 ] = [ " 7112 " , " 高雄 " , " 71 " , "" ];
aDQ[ 330 ] = [ " 7113 " , " 屏东 " , " 71 " , "" ];
aDQ[ 331 ] = [ " 7114 " , " 台东 " , " 71 " , "" ];
aDQ[ 332 ] = [ " 7115 " , " 花莲 " , " 71 " , "" ];
aDQ[ 333 ] = [ " 7116 " , " 澎湖 " , " 71 " , "" ];
aDQ[ 334 ] = [ " 7117 " , " 基隆 " , " 71 " , "" ];
aDQ[ 335 ] = [ " 7118 " , " 金门 " , " 71 " , "" ];
aDQ[ 336 ] = [ " 7119 " , " 马祖 " , " 71 " , "" ];
aDQ[ 337 ] = [ " 8101 " , " 新界 " , " 81 " , "" ];
aDQ[ 338 ] = [ " 8102 " , " 香港岛 " , " 81 " , "" ];
aDQ[ 339 ] = [ " 8103 " , " 大屿山 " , " 81 " , "" ];
aDQ[ 340 ] = [ " 8104 " , " 九龙 " , " 81 " , "" ];
aDQ[ 341 ] = [ " 8201 " , " 澳门本岛 " , " 82 " , "" ];
aDQ[ 342 ] = [ " 8202 " , " 凼仔 " , " 82 " , "" ];
aDQ[ 343 ] = [ " 8203 " , " 路环 " , " 82 " , "" ];
// 通过 DOM 创建下拉框
// obj:下拉框的 options 数据集
// id:下拉框的 id
function CreateDropDownList(obj,id)
... ... {
var sel=document.getElementById(id);
sel.options.length=1; //保存"—请选择—"
//对于省份、城市常用 Array 存储，对于县、镇则用C#从数据库读取
if(obj==null)return;
if(obj instanceof Array)
......{
for(var i=0;i<obj.length;i++)
......{
var op=document.createElement("option");
op.setAttribute("value",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
else
......{
for(var i=0;i<obj.Rows.length;i++) //注意这里是 length 不是 Count
......{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); //注意区分大小写
var txt=document.createTextNode(obj.Rows[i].NAME); //根 DataTable 的列名称要一致
op.appendChild(txt);
sel.appendChild(op);
}
}
//绑定下一个下拉框
switch(id)
......{
case "SF":sel.onchange=function()......{ClearXianZhen();CreateDropDownList(GetArray(this.value),"CS");};break;
case "CS":sel.onchange=function()......{ClearZhen();CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Xian).value,"Xian");};break; //JS 向 C# 传递参数，并取得 C# 的返回值
case "Xian":sel.onchange=function()......{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break; //返回值.value
default:sel.onchange=function()......{alert(this.value);};break;
}
}
// 执行入口
var arr = GetArray( " 0 " );
CreateDropDownList(arr, " SF " );
// 获取要求的数组
// tar=所属的省份ID
function GetArray(val)
... ... {
var temp=new Array();
var j=0;
for(var i=0;i<aDQ.length;i++)
......{
if(aDQ[i][2].toString()==val)
......{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
return temp;
}
// 清空"镇"下拉框
function ClearZhen()
... ... {
CreateDropDownList(null,"Zhen");
}
// 清空"县"和"镇"下拉框
function ClearXianZhen()
... ... {
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}
</ script >
</ form >
</ body >
</ html >
using System;
using System.Data;
using System.Data.OracleClient;
public partial class Area : System.Web.UI.Page
... {
protected void Page_Load(object sender, EventArgs e)
...{
//将C#的类和枚举分别注册到JS里
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}
/**//// <summary>
/// 取得下拉框所需数据
/// </summary>
/// <param name="UpID">上一级ID</param>
/// <param name="ae">县/镇</param>
/// <returns>返回 DataTable</returns>
[AjaxPro.AjaxMethod]
public DataTable GetDataTable(string UpID, AreaEnum ae)
...{
if (String.IsNullOrEmpty(UpID))
return null;
string link = "server=XXX;user=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);
//Oracle 返回的 DataTable 里的列名全是大写，在页面取值时记得大写
string sql;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id,name FROM City WHERE THREEID=0 AND TWOID=" + UpID;
else
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID;
OracleDataAdapter adapter = new OracleDataAdapter(sql, conn);
DataTable table = new DataTable();
adapter.Fill(table);
return table;
}
}
/**/ /// <summary>
/// 地区枚举
/// </summary>
public enum AreaEnum
... {
/**//// <summary>
/// 县
/// </summary>
Xian,
/**//// <summary>
/// 镇
/// </summary>
Zhen
}
到此基本功能实现，还有些功能（通过域名/IP来判断地区并直接绑定，将选择好的地区保存，方便的读/存城市信息以便做成控件 等等）。有空再写完。
记得在 Web.config 的 <system.web> 加入
< httpHandlers >< add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
</ httpHandlers >
更多推荐
使用 AjaxPro 开发四级无刷新联动下拉框
发布评论