QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

jquery教程

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

 admin  2017-08-05 10:34:32
首先下载一个全国各个地区的一个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> 

效果:

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《js自己写的全国省市三级联动效果》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/jquery/714.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序