你的位置:首页 资讯 jQuery读取json文件,实现省市区/县(国标)三级联动

jQuery读取json文件,实现省市区/县(国标)三级联动

最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动。
其实很简单,jQuery文档也有详细解释:





代码如下:
html


  1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td>
  4.      <!-- 暂无 ** 如需要可在city.json文件中添加-->
  5.       <select id="province" name="province" onchange="doProvAndCityRelation();">
  6.         <option id="choosePro" value="-1">请选择您所在省份</option>
  7.       </select>
  8.     </td>
  9.   </tr>
  10.   <tr>
  11.     <td>
  12.       <select id="citys" name="city" onchange="doCityAndCountyRelation();">
  13.         <option id='chooseCity' value='-1'>请选择您所在城市</option>
  14.       </select>
  15.     </td>
  16.   </tr>
  17.   <tr>
  18.     <td>
  19.       <select id="county" name="county">
  20.         <option id='chooseCounty' value='-1'>请选择您所在区/县</option>
  21.       </select>
  22.     </td>
  23.   </tr>
  24. </table>
复制代码
js


  1. <script language="javascript">
  2.        var cityJson;
  3. $(function(){
  4. //load city.json
  5. $.getJSON(
  6. "city.json",
  7. function(obj) {
  8. cityJson = obj;
  9. var sb = new StringBuffer();
  10. $.each(obj, function(i, val) {
  11. if(val.item_code.substr(2, 4) == '0000'){
  12. sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  13. }
  14. });
  15. $("#choosePro").after(sb.toString());
  16. }
  17. );
  18. });
  19.           // 省值变化时 处理市
  20. function doProvAndCityRelation(){
  21. var city = $("#citys");
  22. var county = $("#county");
  23. if(city.children().length > 1){
  24. city.empty();
  25. }
  26. if(county.children().length > 1){
  27. county.empty();
  28. }
  29. if($("#chooseCity").length == 0){
  30. city.append("<option id='chooseCity' value='-1'>请选择您所在城市</option>");
  31. }
  32. if($("#chooseCounty").length == 0){
  33. county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
  34. }
  35. var sb = new StringBuffer();
  36. $.each(cityJson, function(i, val) {
  37. if(val.item_code.substr(0, 2) == $("#province").val().substr(0, 2) && val.item_code.substr(2, 4) != '0000' && val.item_code.substr(4, 2) == '00'){
  38. sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  39. }
  40. });
  41. $("#chooseCity").after(sb.toString());
  42. }
  43.           // 市值变化时 处理区/县
  44. function doCityAndCountyRelation(){
  45. var cityVal = $("#citys").val();
  46. var county = $("#county");
  47. if(county.children().length > 1){
  48. county.empty();
  49. }
  50. if($("#chooseCounty").length == 0){
  51. county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
  52. }
  53. var sb = new StringBuffer();
  54. $.each(cityJson, function(i, val) {
  55. if(cityVal=='110100' || cityVal=="120100" || cityVal=="310100" || cityVal=="500100"){
  56. if(val.item_code.substr(0, 3) == cityVal.substr(0, 3) && val.item_code.substr(4, 2) != '00'){
  57. sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  58. }
  59. }else{
  60. if(val.item_code.substr(0, 4) == cityVal.substr(0, 4) && val.item_code.substr(4, 2) != '00'){
  61. sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  62. }
  63. }
  64. });
  65. $("#chooseCounty").after(sb.toString());

  66. }

  67. function StringBuffer(str){
  68. var arr = [];
  69. str = str || "";
  70. var size = 0 ; // 存放数组大小
  71. arr.push(str);
  72. // 追加字符串
  73. this.append = function(str1) {
  74. arr.push(str1);
  75. return this;
  76. };
  77. // 返回字符串
  78. this.toString = function(){
  79. return arr.join("");
  80. };
  81. // 清空
  82. this.clear = function(key){
  83. size = 0 ;
  84. arr = [] ;
  85. }
  86. // 返回数组大小
  87. this.size = function(){
  88. return size ;
  89. }
  90. // 返回数组
  91. this.toArray = function(){
  92. return buffer ;
  93. }
  94. // 倒序返回字符串
  95. this.doReverse = function(){
  96. var str = buffer.join('') ;
  97. str = str.split('');
  98. return str.reverse().join('');
  99. }
  100. };
  101. </script>
复制代码
最后附上city.json文件


  1. [
  2. {"item_code":"110000","item_name":"北京市"},
  3. {"item_code":"120000","item_name":"天津市"},
  4. {"item_code":"130000","item_name":"河北省"},
  5. {"item_code":"140000","item_name":"山西省"},
复制代码


例子截图:


杨涛 说:好东西求分享

发表评论

点击刷新验证码
站内搜索
Process: 1.2654s ( Load:0.0002s Init:0.0006s Exec:1.2335s Template:0.0310s ) | DB :66 queries 1 writes | UseMem:646 kb