标签：
最近有空用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>
做出来的效果就是：
标签：
原文地址：http://www.cnblogs.com/wanglei7175/p/5720768.html
