JS全国城市三级联动

Javascript  

完整案例下载地址

HTML

  1. <html>
  2.     <head>
  3.         <title>JS全国城市三级联动</title>
  5.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.         <meta http-equiv="description" content="this is my page">
  7.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8.         <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
  9.     </head>
  11.     <body>
  12.         <div align="center">
  13.             </br>
  14.             </br>
  15.             </br>
  16.             </br>
  17.             </br>
  19.             <form class="form-horizontal">
  20.                 <select  style="width:100px;height:30px;" id="s_province" name="s_province"></select>  
  21.                 <select  style="width:100px;height:30px;" id="s_city" name="s_city" ></select>  
  22.                 <select  style="width:100px;height:30px;" id="s_county" name="s_county"></select>  
  23.             </form>
  25.             <script class="resources library" src="js/area.js" type="text/javascript"></script>            
  26.             <script type="text/javascript">_init_area();</script>
  28.     </body>
  30. </html>

JS

  2. function Dsy(){
  3.     this.Items = {};
  4. }
  5. Dsy.prototype.add = function(id,iArray){
  6.     this.Items[id] = iArray;
  7. }
  8. Dsy.prototype.Exists = function(id){
  9.     if(typeof(this.Items[id]) == "undefined") return false;
  10.     return true;
  11. }
  13. function change(v){
  14.     var str="0";
  15.     for(i=0;i<v;i++){
  16.         str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
  17.     };
  18.     var ss=document.getElementById(s[v]);
  19.     with(ss){
  20.         length = 0;
  21.         options[0]=new Option(opt0[v],opt0[v]);
  22.         if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){
  23.             if(dsy.Exists(str)){
  24.                 ar = dsy.Items[str];
  25.                 for(i=0;i<ar.length;i++){
  26.                     options[length]=new Option(ar[i],ar[i]);
  27.                 }//end for
  28.                 if(v){ options[0].selected = true; }
  29.             }
  30.         }//end if v
  31.         if(++v<s.length){change(v);}
  32.     }//End with
  33. }
  35. var dsy = new Dsy();
  37. dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"]);
  38. dsy.add("0_0_0",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","延庆镇"]);
  39. dsy.add("0_0",["北京市"]);
  40. dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","蓟县","宁河县","芦台镇","静海县","静海镇"]);
  41. dsy.add("0_1",["天津市"]);
  42. dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","城桥镇"]);
  43. dsy.add("0_2",["上海市"]);
  44. dsy.add("0_3_0",["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川区市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","荣昌县","璧山县","垫江县","武隆县","丰都县","城口县","梁平县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县"]);
  45. dsy.add("0_3",["重庆市"]);
  47. ......
  49. dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"]);
  51. var s=["s_province","s_city","s_county"];//三个select的name
  52. var opt0 = ["省份","地级市","区县"];//初始值
  53. function _init_area(){  //初始化函数
  54.     for(i=0;i<s.length-1;i++){
  55.       document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
  56.     }
  57.     change(0);
  58. }



评论 0

发表评论

点击排行

标签云

友情链接

Top