上次找到地区编码后，就测试省市县。网上找到例子感觉不是很合适，然后修改了下。
本来是从自己数据库查询，但做测试的话，在网上找到了一个地区编码的api，然后就是跨域问题。原来用ajax访问失败，getJSON可以，但getJson有同步问题，设置了全局参数也不管用，只好重复使用了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-1.8.3.min.js" ></script> 7 </head> 8 <body> 9 <div class="selectList"> 10 <select class="province" id="province"> 11 <option>请选择</option> 12 </select> 13 <select class="city" id="city"> 14 <option>请选择</option> 15 </select> 16 <select class="district" id="district"> 17 <option>请选择</option> 18 </select> 19 <input type='button' value='获取代码' onclick="getCode();"> </input> 20 </div> 21 <div class="selectList2"> 22 <select class="province"> 23 <option>请选择</option> 24 </select> 25 <select class="city"> 26 <option>请选择</option> 27 </select> 28 <select class="district"> 29 <option>请选择</option> 30 </select> 31 </div> 32 <script type="text/javascript"> 33 function getCode(){ 34 console.log($('#province').val()); 35 console.log($('#city').val()); 36 console.log($('#district').val()); 37 alert($('#province').val()+$('#province').find("option:selected").text() 38 +' '+$('#city').val()+$('#city').find("option:selected").text() 39 +' '+$('#district').val()+$('#district').find("option:selected").text() 40 ); 41 } 42 43 function initMyArea(without_id,p,c,d){ 44 var oProvince = $('.'+without_id).find(".province"); 45 var oCity = $('.'+without_id).find(".city"); 46 var oDistrict = $('.'+without_id).find(".district"); 47 initProvince(p,c,d); 48 49 function initProvince(pr,ci,di){ 50 // var options =getAreaData('000000'); 51 $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:'000000000000'},function(data){ 52 53 var list = data.list; 54 var temp_html="<option value='0'>请选择</option>"; 55 $.each(list,function(name,value){ 56 temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>"; 57 58 }); 59 60 oProvince.html(temp_html); 61 if(pr!=undefined){ 62 oProvince.val(pr); 63 } 64 changeProvince(ci,di); 65 66 }); 67 68 69 } 70 71 //当省改变赋值市 72 function changeProvince(ci,di){ 73 var n = oProvince.val(); 74 var pre=n.substring(0,2); 75 if(pre==71 || pre ==81 || pre==82){ 76 oDistrict.css("display","none"); 77 oCity.css("display","none"); 78 }else{ 79 oDistrict.css("display","inline"); 80 oCity.css("display","line"); 81 } 82 83 $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:n},function(data){ 84 85 var list = data.list; 86 var temp_html="<option value='0'>请选择</option>"; 87 $.each(list,function(name,value){ 88 temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>"; 89 90 }); 91 92 oCity.html(temp_html); 93 if(ci!=undefined){ 94 oCity.val(ci); 95 } 96 changeCity(di); 97 98 }); 99 100 }; 101 //当市改变赋值县 102 function changeCity(di){ 103 var n = oCity.val(); 104 /*var options =getAreaData(n); 105 oDistrict.html(options); 106 if(di!=undefined) 107 oDistrict.val(di);*/ 108 if(n=='0'){ 109 oDistrict.val(0); 110 return; 111 } 112 $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:n},function(data){ 113 114 var list = data.list; 115 var temp_html="<option value='0'>请选择</option>"; 116 $.each(list,function(name,value){ 117 temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>"; 118 119 }); 120 121 oDistrict.html(temp_html); 122 if(di!=undefined){ 123 oDistrict.val(di); 124 } 125 126 127 }); 128 }; 129 //选择省改变市 130 oProvince.change(function(){ 131 changeProvince(); 132 }); 133 //选择市改变县 134 oCity.change(function(){ 135 changeCity(); 136 }); 137 138 139 function getAreaData(code){ 140 var temp_html = "<option value='0'>请选择</option>"; 141 $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',function(data){ 142 console.log(data.list) 143 var list = data.list; 144 $.each(list,function(name,value){ 145 temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>"; 146 147 }) 148 149 }); 150 151 return temp_html; 152 } 153 154 } 155 156 $(document).ready(function(){ 157 initMyArea('selectList','130000000000','130600000000','130622000000'); 158 initMyArea('selectList2','210000000000','210500000000','210504000000'); 159 }); 160 161 162 163 </script> 164 </body> 165 </html>