最近有空用jquery做了一個全國省市縣的三級聯動，在以后或許可以用的到 ，遺憾的是我還沒用封裝，等有空看能不能封裝成一個插件
廢話不多說，貼上代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框</title> 6 <script src="city.js"></script> 7 <script src="jquery-1.11.3.js"></script> 8 <style> 9 div{ 10 width:500px; 11 margin:0 auto; 12 text-align:center; 13 } 14 select{ 15 width:100px; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <h1>全國省市縣三級聯動</h1> 22 <select id="province"> 23 <option value="省份（市）">省份（市）</option> 24 </select> 25 <select id="city"> 26 <option value="市（區）">市（區）</option> 27 </select> 28 <select id="county"> 29 <option value="縣、鎮">縣、鎮</option> 30 </select> 31 </div> 32 <script> 33 var cityAll=city.citylist; 34 $.each(cityAll,function(i,n){ 35 $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>'); 36 }); 37 $("#province,#city").change(function(){ 38 if($(this).attr("id") == "province"){ 39 $("#city").html("").append('<option value="市（區）">市（區）</option>').next().html("").append('<option value="縣、鎮">縣、鎮</option>'); 40 }else{ 41 $("#county").html("").append('<option value="縣、鎮">縣、鎮</option>'); 42 } 43 $.each(cityAll,function(j,k){ 44 if($("#province").val() == k.p){ 45 $.each(k.c,function(l,m){ 46 $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>'); 47 if(m.a){ 48 $("#county").show(); 49 if($("#city").val() == m.n){ 50 $.each(m.a,function(e,f){ 51 $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>'); 52 }); 53 } 54 }else{ 55 $("#county").hide(); 56 57 } 58 }); 59 } 60 }); 61 }); 62 63 </script> 64 </body> 65 </html>
做出來的效果就是：
全國省市縣三級聯動
好吧 ，我試着把js什么的也導進去，發現沒效果，如果有想看的可以去下面我的雲盤里面下載，如果有什么好的建議，也歡迎大家提出
鏈接:
https://pan.baidu.com/s/1geZh41X 密碼: 2zdq