返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
jquery教程当前位置:首页 > HTML教程 > jquery教程 > 正文

js自己写的全国省市三级联动效果

发布时间:2017-08-05 10:30:26   来源:   点击:
首先下载一个全国各个地区的一个js
全国城市数据.rar 这个js是通过json格式填写的!
  1. var cityData3 = [{ 
  2.     value: '110000'
  3.     text: '北京市'
  4.     children: [{ 
  5.         value: "110101"
  6.         text: "北京市"
  7.         children: [{ 
  8.             value: "110101"
  9.             text: "东城区" 
  10.         }, { 
  11.             value: "110102"
  12.             text: "西城区" 
  13.         }, { 
  14. .......

html和js的代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="utf-8"
  5.   <title>城市选择</title> 
  6.   <meta name="renderer" content="webkit"
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
  9.   <script src="js/jquery-1.8.3.min.js"></script> 
  10.   <script src="js/city.data-3.js"></script> 
  11. </head> 
  12. <style type="text/css"
  13.     #city { display: none; } 
  14.     #area { display: none; } 
  15.     select { float: left; margin-right:10px;  } 
  16. </style> 
  17. <body> 
  18.  
  19. <select name="province" id="province"
  20.     <option value="">---请选择---</option> 
  21. </select> 
  22. <select name="city" id="city"
  23.     <option value="">---请选择---</option> 
  24. </select> 
  25. <select name="area" id="area"
  26.     <option value="">---请选择---</option> 
  27. </select> 
  28.  
  29. <script> 
  30.     $(function(){ 
  31.         $.each(cityData3, function(index, p){ 
  32.             //console.log(cityData3[index].text); 
  33.             str = "<option value='"+ cityData3[index].value +"'>"+ cityData3[index].text+ "</option>"
  34.             $("#province").append(str); 
  35.         }); 
  36.         $("#province").change(function(){ 
  37.             var province = $(this).val(); 
  38.             $("#city").html("").css("display","block"); 
  39.             var index = $(this).get(0).selectedIndex - 1; 
  40.             if(index == -1){ 
  41.                 $("#city").html("<option value=''>---请选择---</option>"); 
  42.                 $("#area").html("<option value=''>---请选择---</option>"); 
  43.             }else
  44.                 $.each(cityData3[index].children, function(k ,p){ 
  45.                    str = "<option value='"+ p.value +"'>"+ p.text+ "</option>"
  46.                    $("#city").append(str); 
  47.                }) 
  48.             } 
  49.  
  50.             //自动弹出三级的第一个内容 
  51.             if(cityData3[index]["children"][0]["children"]){ 
  52.                 $("#area").html("").css("display","block"); 
  53.                 $.each(cityData3[index]["children"][0]["children"], function(k ,p){ 
  54.                    str = "<option value='"+ p.value +"'>"+ p.text+ "</option>"
  55.                    $("#area").append(str); 
  56.                }) 
  57.             } 
  58.         }); 
  59.         //console.log(cityData3[0]["children"][0]["children"][0]); 
  60.         $("#city").change(function(){ 
  61.             var city = $(this).val(); 
  62.             $("#area").html("").css("display","block"); 
  63.             var index = $("#province").get(0).selectedIndex - 1; 
  64.             var index2 = $(this).get(0).selectedIndex; 
  65.             if(index2 == -1){ 
  66.                 $("#area").html("<option value=''>---请选择---</option>"); 
  67.             }else
  68.                 $.each(cityData3[index]["children"][index2]["children"], function(k ,p){ 
  69.                    str = "<option value='"+ p.value +"'>"+ p.text+ "</option>"
  70.                    $("#area").append(str); 
  71.                }) 
  72.             } 
  73.         }); 
  74.  
  75.     }); 
  76. </script> 
  77. </body> 
  78. </html> 

效果:

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814