不支持ie6和ie7 可能是js选择器的问题 但是其他浏览器都是可以正常支持的~这个没有做jq兼容 所以需要的朋友可自行修改
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title> New Document </title>
6 <meta name="Keywords" content="">
7 <meta name="Description" content="">
8 <script type="text/javascript"></script>
9
10 <style type="text/css">
11 body,div,span,ul,li{padding:0px;margin:0px;}
12 .provincial{width:100px;height:17px;border:1px solid #ccc;float:left;}
13 .prodian{display:block;float:right;width:16px;height:17px;background:url(s_jt.jpg) 0 0 no-repeat;}
14 .proxuan{height:17px;line-height:17px;font-size:12px;overflow:hidden;width:70px;}
15 .proinner{width:100px;height:50px;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;display:none;overflow-y:scroll;overflow-x:hidden;}
16 .proinner ul{width:100px;}
17 .proinner ul li{width:100px;list-style-type:none;font-size:12px;padding-left:3px;padding:1px 0px;}
18
19 .city{width:100px;height:17px;border:1px solid #ccc;float:left;margin-left:10px;}
20 .citydian{display:block;float:right;width:16px;height:17px;background:url(s_jt.jpg) 0 0 no-repeat;}
21 .cityxuan{height:17px;line-height:17px;font-size:12px;overflow:hidden;}
22 .cityinner{width:100px;height:50px;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;display:none;overflow-y:scroll;overflow-x:hidden;}
23 .cityinner ul{width:100px;}
24 .cityinner ul li{width:100px;height:12px;list-style-type:none;font-size:12px;padding-left:3px;overflow:hidden;line-height:12px;padding:1px 0px;}
25 </style>
26 </head>
27
28 <body>
29 <div class="provincial">
30 <span class="prodian"></span>
31 <div class="proxuan">选择省会</div>
32 <div class="proinner">
33 <ul class="proul"></ul>
34 </div>
35 </div>
36 <div class="city">
37 <span class="citydian"></span>
38 <div class="cityxuan">选择城市</div>
39 <div class="cityinner">
40 <ul class="cityul"></ul>
41 </div>
42 </div>
43 </body>
44 <script type="text/javascript">
45 <!--
46
47 var dictProv = {"1001":"北京市","1002":"天津市","1003":"上海市","1004":"重庆市","1005":"黑龙江省","1006":"吉林省","1007":"辽宁省","1008":"河北省","1009":"山东省","1010":"江苏省","1011":"安徽省","1012":"浙江省","1013":"福建省","1014":"广东省","1015":"海南省","1016":"云南省","1017":"贵州省","1018":"四川省","1019":"湖南省","1020":"湖北省","1021":"河南省","1022":"山西省","1023":"陕西省","1024":"甘肃省","1025":"青海省","1026":"江西省","1027":"新疆维吾尔自治区","1028":"西藏自治区","1029":"宁夏回族自治区","1030":"内蒙古自治区","1031":"广西壮族自治区","1032":"香港特别行政区","1033":"澳门特别行政区","1034":"台湾","1035":"其他"};
48 var arrCity = new Array();
49
50 arrCity["1001"] = {"100101":"海淀区","100102":"东城区","100103":"西城区","100104":"宣武区","100105":"丰台区","100105":"朝阳区","100106":"崇文区","100107":"大兴区","100108":"石景山区","100109":"门头沟区","100110":"房山区","100111":"通州区","100112":"顺义区","100113":"怀柔区","100114":"昌平区","100115":"平谷区","100116":"密云县","100117":"延庆县"};
51 arrCity["1002"] = {"100201":"和平区","100202":"河西区","100203":"河北区","100204":"河东区","100205":"南开区","100206":"红桥区","100207":"北辰区","100208":"津南区","100209":"武清区","100210":"塘沽区","100211":"西青区","100212":"汉沽区","100213":"大港区","100214":"宝坻区","100215":"东丽区