上次找到地区编码后,就测试省市县。网上找到例子感觉不是很合适,然后修改了下。
本来是从自己数据库查询,但做测试的话,在网上找到了一个地区编码的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 +'\n'+$('#city').val()+$('#city').find("option:selected").text()
39 +'\n'+$('#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>