基於JQuery+Json資料格式的省市區三級聯動
阿新 • • 發佈：2018-11-11
本文章適用於新手，老手自便
先看原始碼:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--jq包--> <script type="text/javascript" src="js/cityjson.js"></script><!--資料來源檔案--> <script type="text/javascript"> $(document).ready(function(){ //操作DOM，載入資料到下拉列表 foreach $.each(data,function(index,item){ //迴圈data資料中每一個 $("#province").append("<option value="+index+">"+item.name+"</option>"); }); //點選不同的省，載入市 $("#province").bind("change",function(){ //得到哪個省被點選 var province = $(this).val();//得到當前省份 var city = data[province].child;//得到當前省份的所有城市 //載入該省的資料 $("#city").empty();//重新選擇省時候清空城市列表 $("#area").empty();//重新選擇省時候清空區列表 $("#city").append("<option>請選擇</option>"); $.each(city,function(index2,item){ $("#city").append("<option value="+index2+">"+item.name+"</option>"); }); }); $("#city").bind("change",function(){ $("#area").empty();//重新選擇城市時候清空區列表 $("#area").append("<option>請選擇</option>"); var province = $("#province").val(); //得到當前省 var citynum = $(this).val();//得到當前城市 var are = data[province].child[citynum].child; //得到當前城市所對應的城區 $.each(are,function(index3,item){ $("#area").append("<option value="+index3+">"+item+"</option>"); }); }); }); </script> </head> <body> 省：<select id="province"><option>請選擇</option></select> 市：<select id="city"></select> 區：<select id="area"></select> </body> </html>
這裡是瀏覽器的效果圖：
再來看一下資料的程式碼片段：
var data = { "110000": { "name": "北京市", "child": { "110100": { "name": "市轄區", "child": { "110101": "東城區", "110102": "西城區", "110105": "朝陽區", "110106": "豐臺區", "110107": "石景山區", "110108": "海淀區", "110109": "門頭溝區", "110111": "房山區", "110112": "通州區", "110113": "順義區", "110114": "昌平區", "110115": "大興區", "110116": "懷柔區", "110117": "平谷區", "110118": "密雲區", "110119": "延慶區" } } } }, "120000": { "name": "天津市", "child": { "120100": { "name": "市轄區", "child": { "120101": "和平區", "120102": "河東區", "120103": "河西區", "120104": "南開區", "120105": "河北區", "120106": "紅橋區", "120110": "東麗區", "120111": "西青區", "120112": "津南區", "120113": "北辰區", "120114": "武清區", "120115": "寶坻區", "120116": "濱海新區", "120117": "寧河區", "120118": "靜海區", "120119": "薊州區" } } } },
因為資料是基於全國的省市區，這裡沒有全部展示，只展示部分片段
這裡是瀏覽器控制檯的效果圖，方便查詢結點
