如何作一个级联效果的，城市选择插件

（一）场景

          老大安排我弄一个城市选择插件，用在公司系统。

（二）准备工做

         最主要的就是数据了，去几个网站逛了一圈，感受京东的不错，因而就想办法把里面的数据拉下来。京东页面 ，其实很简单，用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了