利用hao123天气插件的地址选择提供的api进行跨域调用实现地址的省 地级市 县 联动选择。

省级选择数据api地址:http://www.hao123.com/api/citymenu?callback=xygui&_=1465059956218

参数callback回调函数,值由你随便定,这里为xygui

参数_为当前时戳。

地级市选择数据api地址:http://www.hao123.com/api/citymenu?callback=xygui&pid=01&_=1465059956218

参数pid为省级选项的value确定。

县选择数据api地址:http://www.hao123.com/api/citymenu?callback=xygui&pid=01&cid=00&_=1465059956218

参数cid为地级市选项的value确定。

打开数据格式为:

/**/xygui([{"id":"01","firstchar":"B","name":"u5317u4eac"},{"id":"02","firstchar":"S","name":"u4e0au6d77"}...])


即调用函数xygui对JSON数据进行处理。
下面我的处理方案:
1、面页定义选择控件:<select class="select-province"></select><select class="select-city"></select><select class="select-district"></select>

2、定义,地址处理函数(jquery):

 1  function setP(pV, cV, dV) {
 2         var weatherData = 'nothing';
 3         var targetID;
 4         var defaultV = 0;
 5 
 6         //定义window.xygui函数,见hao123api。
 7         window.xygui = function (object) {
 8             weatherData = object;
 9         }
10 
11         if ($(".select-province").html() == "") { //初始化省级
12             targetID = "select-province";
13             defaultV = pV;
14             appendScript("http://www.hao123.com/api/citymenu?callback=xygui&_=", targetID)
15             bindData();
16         } else if ($(".select-city").html() == "") {//初始化市级
17             targetID = "select-city";
18             appendScript("http://www.hao123.com/api/citymenu?callback=xygui&pid=" + pV + "&_=", targetID)
19             defaultV = cV;
20             bindData();
21         } else if ($(".select-district").html() == "") { //初始化区级
22             defaultV = dV;
23             targetID = "select-district";
24             appendScript("http://www.hao123.com/api/citymenu?callback=xygui&pid=" + pV + "&cid=" + cV + "&_=", targetID);
25             bindData();
26         } else {
27             $(".select-district").val(dV);
28 
29             return "ok";
30         }
31 
32         function bindData() {
33             if (weatherData == 'nothing') { //利用timer等待直到加载完成并执行xygui函数
34                 setTimeout(bindData, 100);
35             } else {
36                 targetOb = $("." + targetID);
37                 if (weatherData == null) {
38                     // 直辖市从00开始,其它从01开始
39                     setP(pV, cV == "01" ? "00" : "01", dV);
40                 } else {
41                     for (var i = 0; i < weatherData.length; i++) {
42                         opt = '<option value="' + weatherData[i].id + '">' + weatherData[i].firstchar + ' ' + weatherData[i].name + '</option>';
43                         targetOb.append(opt);
44                     }
45                     targetOb.val(defaultV);
46                     setP(pV, cV, dV);//递归调用。
47                 }
48             }
49         }
50     
51         function appendScript(url, scriptid) {  //加载js
52             var timestamp = new Date().getTime();
53             var script = document.getElementById("script-" + scriptid);
54             if (script) document.body.removeChild(script)
55             script = document.createElement('script');
56             script.id = "script-" + scriptid;
57             script.type = "text/javascript";
58             document.body.appendChild(script);
59             script.src = url + timestamp;
60         }
61     }

3、绑定选择改变事件:

 1     $(".select-province").change(function () {
 2         var p = $(".select-province").val();
 3         $(".select-city, .select-district").empty();  //省级选项改变,清空地级市 县选择项。
 4         setP(p, "00", "00");
 5     });
 6 
 7     $(".select-city").change(function () {
 8         var p = $(".select-province").val();
 9         var c = $(".select-city").val();
10         $(".select-district").empty();  //地级市选项改变,清空县选择项。
11         setP(p, c, "00");
12     });

4、页面加载初始化为北京,调用

setP("01", "00", "01");

原文地址:https://www.cnblogs.com/xygui/p/5559986.html