如何作一個級聯效果的，城市選擇插件

（一）場景

          老大安排我弄一個城市選擇插件，用在公司系統。

（二）準備工做

         最主要的就是數據了，去幾個網站逛了一圈，感受京東的不錯，因而就想辦法把裏面的數據拉下來。京東頁面 ，其實很簡單，用google瀏覽器自帶的功能，捕捉下http包，查看下request的請求url，就能夠看出，每一次請求，按參數返回json，而後組裝顯示在頁面，幾個js方法就能夠了。而後再後臺，服務器啓動的時候，將這些數據從數據庫查詢出來放入內存中，（便於提升速度）。而後每次請求直接從內存中的數據結構拉下來就行。

一、寫方法拉京東數據。

<script type="text/javascript">
    $(document).ready(function(){
        //根據市查詢縣
        function country(z){
            var st="";
            $.getJSON("http://buy.jd.com/purchase/flows/easybuy/FlowService.ashx?&action=GetCountys&Id="+z+"&callback=?", function(data){
                var Are= data.Obj.Areas;
                for (var x in Are){
                    st +="insert into qly_bd_region (regionid,regionfid,regiontype,regionname)values('"+Are[x].Id+"' ,'"+z+"','縣','"+Are[x].Name+ "');" ;    
                }
                $("#hh").append(st);
            });
        }
        //根據省id去查詢對應的市
            function test(j){
                $.getJSON("http://buy.jd.com/purchase/flows/easybuy/FlowService.ashx?action=GetCitys&Id="+j+"&callback=?", function(data){
                    var Areas = data.Obj.Areas;
                    //console.log(Areas);
                    var str="";
                    for(var i in Areas ){
                     
                         
                        str +="insert into qly_bd_region (regionid,regionfid,regiontype,regionname)values('"+Areas[i].Id+"' ,'"+j+"','市','"+Areas[i].Name+ "');" ;
                        setInterval(country(Areas[i].Id),1000);
                         
                    }
                    $("#divs").append(str);
                });
            }
             
         
        //這裏的i主要表示省id
            for( var i =1;i<32;i++){
                setInterval(test(42),1000);
            }
    });

 

以上是查詢京東數據，而後直接封裝成sql。（這裏要注意的是json和jsonp的區別，若是用普通的ajax方法會被服務器拒絕）

二、建數據庫表

三、如今能夠寫後臺處理方法了，封裝了數據結構了

helper幫助類

package com.qly.b2b.config;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.apache.ibatis.session.SqlSession;
import org.apache.log4j.Logger;
 
import com.qly.b2b.dao.config.RegionMapper;
import com.qly.b2b.model.config.Region;
import com.qly.b2b.mybatisconn.DbHelper;
 
public class RegionHelper {
    /** 日誌組件 **/
    private static Logger log = Logger.getLogger(SysConfigHelper.class);
 
    /** 數據緩存是否加載完畢 **/
    private static boolean loaded = false;
     
    /** 全部省信息 **/
    private static List<Region> provinceList = new ArrayList<Region>();
 
    /** 按省劃分的市信息 **/
    private static Map<Integer, List<Region>> cityMap = new HashMap<Integer, List<Region>>();
     
    /** 按市劃分的區縣信息 **/
    private static Map<Integer, List<Region>> countyMap = new HashMap<Integer, List<Region>>();
     
    /** 全部地域信息 **/
    private static Map<Integer, Region> regionMap = new HashMap<Integer, Region>();
 
    /** 禁止實例化 */
    private RegionHelper() {
 
    }
 
    /**
     * 
     * load(進行數據初始化) (這裏描述這個方法適用條件 – 可選)
     * 
     * @param force
     *            是否強制加載，用於從新初始化數據 void
     * @exception
     */
    private static synchronized void load(boolean force) {
        // 若是非強制初始化（從新初始化），而且已經初始化完畢，返回
        if (loaded && !force) {
            return;
        }
 
        log.info("========================== 加載全國地址靜態配置信息到緩存開始 ==========================");
        loaded = false;
        provinceList.clear();
        cityMap.clear();
        countyMap.clear();
        regionMap.clear();
         
        // 從數據庫中獲取數據
        List<Region> list = getAllRegion();
 
        // 將數據加載到緩存
        for (Region region : list) {
            if ("1".equals(region.getRegiontype())) {
                provinceList.add(region);
            } else if ("2".equals(region.getRegiontype())) {
                List<Region> cityList = getListFromMap(region.getRegionfid(), cityMap);
                cityList.add(region);
            } else if ("3".equals(region.getRegiontype())) {
                List<Region> countyList = getListFromMap(region.getRegionfid(), countyMap);
                countyList.add(region);
            }
             
            regionMap.put(region.getRegionid(), region);
        }
 
        loaded = true;
        log.info("========================== 加載全國地址靜態配置信息到緩存結束 ==========================");
    }
     
    /**
     * getAllRegion(從數據庫獲取全部地域信息) 
     * (這裏描述這個方法適用條件 – 可選) 
     * @return  
     * List<Region> 
     * @exception
     */
    private static List<Region> getAllRegion() {
        SqlSession sqlSession = DbHelper.getSqlSession();
        RegionMapper mapper = sqlSession.getMapper(RegionMapper.class);
        List<Region> list = mapper.getAllRegion();
        sqlSession.close();
        return list;
    }
     
    /**
     * getListFromMap(根據地域父ID從 Hash map 中獲取對應 List) 
     * (這裏描述這個方法適用條件 – 可選) 
     * @param regionfid
     * @param map
     * @return  
     * List<Region> 
     * @exception
     */
    private static List<Region> getListFromMap(Integer regionfid, Map<Integer, List<Region>> map) {
        if (map.containsKey(regionfid)) {
            return map.get(regionfid);
        } else {
            List<Region> list = new ArrayList<Region>();
            map.put(regionfid, list);
            return list;
        }
    }
 
    /**
     * 
     * reload(從新加載數據) (這裏描述這個方法適用條件 – 可選) void
     * 
     * @exception
     */
    public static void reload() {
        load(true);
    }
     
    /**
     * getProvinceList(這裏用一句話描述這個方法的做用) 
     * (這裏描述這個方法適用條件 – 可選) 
     * @return  
     * List<Region> 
     * @exception
     */
    public static List<Region> getProvinceList() {
        if (!loaded) {
            load(false);
        }
         
        return provinceList;
    }
 
    /**
     * 根據省id，拿到對應的城市信息
     */
    public static List<Region> getCityList(Integer provinceId) {
        if (!loaded) {
            load(false);
        }
 
        return cityMap.get(provinceId);
    }
 
    /**
     * 根據市id拿到對應的縣
     * 
     * @param cityId
     * @return
     */
    public static List<Region> getCountyMap(Integer cityId) {
        if (!loaded) {
            load(false);
        }
 
        return countyMap.get(cityId);
    }
 
    /**
     * getRegion(根據地域ID獲取地域信息) 
     * (這裏描述這個方法適用條件 – 可選) 
     * @param regionId
     * @return  
     * Region 
     * @exception
     */
    public static Region getRegion(Integer regionId) {
        if (!loaded) {
            load(false);
        }
 
        return regionMap.get(regionId);
    }
}

controller類

@Controller
@RequestMapping("/region")
public class RegionController extends BaseController {
 
    @RequestMapping(value = "/getallprovince")
    @ResponseBody
    public ModelMap getallprovince(HttpServletRequest request, ModelMap modelMap)
            throws Exception {
        List< Region> provincelist = RegionHelper.getProvinceList();
        modelMap.put("provincelist", provincelist);
        return modelMap;
    }
 
    @RequestMapping(value = "/getcity")
    @ResponseBody
    public ModelMap getcity(HttpServletRequest request, ModelMap modelMap)
            throws Exception {
        List< Region> citylist = RegionHelper.getCityList(Integer.parseInt(request.getParameter("id")));
        modelMap.put("citylist", citylist);
        return modelMap;
    }
     
    @RequestMapping(value = "/getcounty")
    @ResponseBody
    public ModelMap getcounty(HttpServletRequest request, ModelMap modelMap)
            throws Exception {
        List< Region> countylist = RegionHelper.getCountyMap(Integer.parseInt(request.getParameter("id")));
        modelMap.put("countylist", countylist);
        return modelMap;
    }
}

四、處理前臺js展示

$(document).ready(function(){
    //得到省列表，初始化第一個 select
    $.getJSON(basepath+"/region/getallprovince", function(data){
      setOptions("province", data.provincelist);
    });
});
 
//獲取城市列表
function getCitys(){
    setAddress();
     
    var cityid = $("#province").find("option:selected").val();
    if (cityid == "")
    {
        clearSelect("city");
        return;
    }
    $.getJSON(basepath+"/region/getcity",{id:cityid}, function(data){
         setOptions("city", data.citylist);
        });
     
      //清空地區列表
      clearSelect("county");
//  });
}
 
//獲取地區列表
function getAreas(){
    setAddress();
    var countyid = $("#city").find("option:selected").val();
    if (countyid == "")
    {
        clearSelect("county");
        return;
    }
    $.getJSON(basepath+"/region/getcounty",{id:countyid}, function(data){
      setOptions("county", data.countylist);
    });
}
 
//清空下拉列表
function clearSelect(id){
    $("#" + id).empty() ;
    $("#" + id).append("<option value=''>請選擇</option>");
}
 
//將數據放到指定select 中
function setOptions(id, datas) {
    $("#" + id).empty() ;
    $("#" + id).append("<option value=''>請選擇</option>");
    for (var i in datas )
    {
        $("#" + id).append("<option value='" + datas[i].regionid + "'>" + datas[i].regionname + "</option>");
    }
}
 
function setAddress(){
    var address = getOptionName("province") + getOptionName("city") + getOptionName("county");
    $("#address1").html(address);
    var address1 = $("#address1").text();
    $("#provinceaddress").val(address1);
}
 
function getOptionName(id) {
    if($("#" + id).find("option:selected").val() != ""){
        return $("#" + id).find("option:selected").html();
    }
 
    return "";
}

 

<select name="province" id="province" onchange="getCitys()">
<option value=''>請選擇</option>
</select> <select name="city" id="city" onchange="getAreas()">
<option value=''>請選擇</option>
</select> <select name="county" id="county"
onchange="setAddress()">
<option value=''>請選擇</option>
</select>
 
<span id="address1"></span></span>

五、到此爲止，一個js城市選擇的插件就ok了