省级选择数据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":"\u5317\u4eac"},{"id":"02","firstchar":"S","name":"\u4e0a\u6d77"}...])

即调用函数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”);

版权声明：本文为xygui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xygui/p/5559986.html