JSon實現三級聯動
我覺得我這個方法比較麻煩，但是目前技術還比較弱，所以先做個筆記自己理解。目前沒有和后台交互，只是在前台頁面實現了
jQuery和JSon數據實現的，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JSON</title> 6 <script type="text/javascript" src="../WEB-INF/jquery-1.4.2.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //省份，城市，鄉鎮的數據 10 var cpJson =[ 11 { 12 "p" : "銀川市", 13 "c" : [{"c1":"興慶區"},{"c1":"金鳳區"},{"c1":"西夏區"},{"c1":"中寧縣"},{"c1":"靈武市"},{"c1":"賀蘭縣"}], 14 "d" : [{"c":"興慶區","d":"興慶區-1"},{"c":"興慶區","d":"興慶區-2"},{"c":"興慶區","d":"興慶區-3"},{"c":"金鳳區","d":"金鳳區-1"},{"c":"靈武市","d":"靈武市-1"},{"c":"靈武市","d":"靈武市-2"}] 15 }, 16 { 17 "p" : "石嘴山市", 18 "c" : [{"c1":"大武口區"},{"c1":"惠農區"},{"c1":"平羅縣"}], 19 "d" : [{"c":"大武口區","d":"大武口區-1"},{"c":"大武口區","d":"大武口區-2"},{"c":"大武口區","d":"大武口區-3"},{"c":"惠農區","d":"惠農區-1"},{"c":"平羅縣","d":"平羅縣-1"}] 20 }, 21 { 22 "p" : "吳忠市", 23 "c" : [{"c1":"利通區"},{"c1":"紅寺堡區"},{"c1":"鹽池縣"},{"c1":"同心縣"},{"c1":"青銅峽市"}] 24 }, 25 { 26 "p" : "中衛市", 27 "c" : [{"c1":"沙坡頭區"},{"c1":"中寧縣"},{"c1":"海原縣"}] 28 }, 29 { 30 "p" : "固原市", 31 "c" : [{"c1":"原州區"},{"c1":"涇源縣"},{"c1":"西吉縣"},{"c1":"隆德縣"},{"c1":"彭陽縣"}] 32 } 33 ]; 34 //初始化 35 function init(obj){ 36 $("obj").html("<option>請選擇</option>"); 37 } 38 //獲取省份的數據 39 init($("#pro")); 40 //獲取有幾個省份，通過循環遍歷出來 41 for(var i = 0; i<cpJson.length;i++){ 42 //獲取到的數據 43 var proresult = "<option value='"+cpJson[i].p+"'>"+cpJson[i].p+"</option>"; 44 //添加到顯示省份的控件里 45 $("#pro").append(proresult); 46 } 47 48 //獲取當前省份的城市。通過選取省份觸發change()事件 49 $("#pro").change(function(){ 50 init($("#city")); 51 init($("#dis")); 52 //清空前面選取時遺留的數據。gt(index)方法獲取下標大於index的數據，index從0開始 53 $("#city option:gt(0)").remove(); 54 $("#dis option:gt(0)").remove(); 55 for(var j = 0;j<cpJson.length;j++){ 56 //判斷選取的省份和JSon數據相匹配的數據 57 if($(this).attr("value") == cpJson[j].p){ 58 //根據當前城市進行循環 59 for(var k = 0;k<cpJson[j].c.length;k++){ 60 //獲取當前省份對應的城市數據 61 var cityresult = "<option value='"+cpJson[j].c[k].c1+"'>"+cpJson[j].c[k].c1+"</option>"; 62 //添加到城市控件里 63 $("#city").append(cityresult); 64 } 65 } 66 } 67 }); 68 69 //獲取當前城市的鄉鎮。通過選取城市觸發change()事件 70 $("#city").change(function(){ 71 init($("#dis")); 72 //清空前面選取時遺留的數據。gt(index)方法獲取下標大於index的數據，index從0開始 73 $("#dis option:gt(0)").remove(); 74 //根據省份循環 75 for(var j = 0;j<cpJson.length;j++){ 76 //根據城市循環 77 for(var k = 0;k<cpJson[j].c.length;k++){ 78 //判斷選取的城市和JSon數據相匹配的數據，如果沒有對應的鄉鎮就進行下次循環 79 if($(this).attr("value") == cpJson[j].c[k].c1 && cpJson[j].d != null ){ 80 ////根據鄉鎮循環 81 for(var n = 0;n<cpJson[j].d.length;n++){ 82 //判斷選取的城市和JSon數據相匹配的數據 83 if($(this).attr("value") == cpJson[j].d[n].c){ 84 //獲取當前城市對應的鄉鎮數據 85 var cityresult = "<option value='"+cpJson[j].d[n].d+"'>"+cpJson[j].d[n].d+"</option>"; 86 //添加到鄉鎮控件里 87 $("#dis").append(cityresult); 88 } 89 } 90 } 91 } 92 } 93 }); 94 95 }); 96 </script> 97 </head> 98 <body> 99 <div id="info"> 100 省份：<select id="pro"><option>請選擇</option></select> 101 城市：<select id="city"><option>請選擇<option></select> 102 鄉鎮：<select id="dis"><option>請選擇<option></select> 103 </div> 104 </body> 105 </html>
效果圖：
如果變換省份的話：
如果前面沒有添加這兩句話的時候，
結果如下：
