关闭

国家省市县三级联动

标签: springMybaits
100人阅读 评论(0) 收藏 举报
分类:

该模块是在SSM框架下实现的

Spring+SpringMVC+Mybaits

ftl页面:

<span class="label">国家:</span> 
        <select id="country" class="info"
            name="country" onChange="changeCountry();">
            <option value="-1">--请选择--</option>
             <#if countryList?? &&(countryList?size > 0)> 
                <#list countryList as countryInfo>
                <option value="${countryInfo.gid}"<#if user.country?? &&
                user.country=countryInfo.gid>selected</#if>>${countryInfo.name}</option>
                </#list>
             </#if>
        </select> <span class="label">省:</span> <select id="province" name="province"
            class="info" onChange="changeProvince();" value="${user.province}">

        </select> <span class="label">市:</span> <select id="city" name="city"
            class="info" onChange="changeCity();"> 
        </select> <span class="label">县:</span> <select id="county" name="county"
            class="info" onChange=""> 
        </select>

js:

var optiontitle='<option value="-1">--请选择--</option>';
// 国家和省份联动
function changeCountry() {
    var countryCode = jQuery("#country").val();
    // 如果没有选中国家,省级列表置空,否则加载该国家的所有省份
    if (countryCode == -1) {
        $("#province").empty();
        jQuery("#province").append(optiontitle);

    } else {
        jQuery("#province").append(optiontitle);
        jQuery.ajax({
            type : 'POST',
            url : ctx + '/getProvince.do',
            dataType : 'json',
            data : {
                countryCode : countryCode
            },
            success : function(data) {
                if (data.pssProvinceList != null) {
                    var provinces = data.pssProvinceList;
                    for (var i = 0; i < provinces.length; i++) {
                        var province = provinces[i];
                        var option;
                        // 页面初始化时,在省份列表中默认选中用户所在省
                        if (data.user.province == province.code) {
                            option = '<option value="' + province.code
                                    + '" selected="selected">' + province.name
                                    + '</option>';
                        } else {
                            option = '<option value="' + province.code + '">'
                                    + province.name + '</option>';
                        }
                        jQuery("#province").append(option);
                    }
                }
                changeProvince();
            },
            error : function() {
                layer.alert('错误!', {
                    icon : 1,
                    skin : 'layer-ext-moon'
                });
            }
        });
    }
}


// 省份与市联动
function changeProvince() {
    var provinceCode = $('#province option:selected') .val();
    // 如果没有选中省份,市级列表置空,否则加载该省份的所有市
    if(provinceCode==-1){
        $("#city").empty();
        jQuery("#city").append(optiontitle);
    }else{

        $("#city").empty();
        jQuery("#city").append(optiontitle);

        jQuery.ajax({
        type : 'POST',
        url : ctx + '/getCity.do',
        dataType : 'json',
        data : {
            provinceCode:provinceCode
        },
        success : function(data) {
            if (data.pssCityList != null) {
                var cityes = data.pssCityList;
                for(var i =0;i<cityes.length;i++){
                    var city = cityes[i];
                    var option;
                    // 页面初始化时,在市列表中默认选中用户所在市
                    if(data.user.city == city.code){
                        option = '<option value="' + city.code
                        + '"selected="selected" >'
                                        + city.name
                                        + '</option>';}
                    else{
                     option = '<option value="' + city.code
                    + '" >'
                                    + city.name
                                    + '</option>';}
                            jQuery("#city").append(option);
                }
            }
            changeCity();
        },
        error:function(){
                layer.alert('切换市失败!', {
                    icon: 1,
                    skin: 'layer-ext-moon' 
                });
            } 
    });

    }
}

//市和县联动
function changeCity() {

var cityCode = jQuery("#city").val();
//如果没有选中市,县级列表置空,否则加载该市的所有县
    if(cityCode==-1){
        $("#county").empty();
        jQuery("#county").append(optiontitle);

    }else{

        $("#county").empty();
        jQuery("#county").append(optiontitle);

        jQuery.ajax({
        type : 'POST',
        url : ctx + '/getTown.do',
        dataType : 'json',
        data : {
            cityCode:cityCode
        },
        success : function(data) {
            if (data.pssTownList != null) {
                var towns = data.pssTownList;
                for(var i =0;i<towns.length;i++){
                    var town = towns[i];
                    var option;
                    // 页面初始化时,在县列表中默认选中用户所在县
                    if(data.user.county == town.code){
                        option = '<option value="' + town.code
                        + '" selected="selected" >'
                                        + town.name
                                        + '</option>';}
                    else{
                     option = '<option value="' + town.code
                    + '" >'
                                    + town.name
                                    + '</option>';}
                            jQuery("#county").append(option);
                }
            }
        },
        error:function(){
                layer.alert('失败!', {
                    icon: 1,
                    skin: 'layer-ext-moon' 
                });
            } 
    });

    }
}

后台java代码:

/**
     * 初始化用户信息
     **/
    @RequestMapping(method = { RequestMethod.POST, RequestMethod.GET }, value = "/UserMessage.do")
    public String usersManage(HttpServletRequest request, ModelMap model) {
        String method = request.getMethod();
        LOGGER.debug("以 {} 方式访问用户信息页面", method);
        ActivityWebUtils.WrapperModle(request, model);
        usersService.getUsersInfoForInitPage(model, method, request);
        PssCountryQuery pssCountryQuery = new PssCountryQuery();    
        // 得到所有国家
        List<PssCountry> countryList = pssCountryService
                .getCountry(pssCountryQuery);

        model.addAttribute("countryList", countryList);
        return "manage/userMessage";
    }

    /**
     * 获取省份信息
     **/
    @RequestMapping(method = RequestMethod.POST, value = "/getProvince.do")
    public @ResponseBody
    Map<String, Object> provinceMessage(HttpServletRequest request,
            HttpServletResponse response) {
        ActivityModelMap modelMap = new ActivityModelMap(request);
        // 根据国家获得省份
        pssProvinceService.getPssProvinceByCountry(request, modelMap);
        return modelMap.getModelMap();
    }

    /**
     * 获取市信息
     **/
    @RequestMapping(method = RequestMethod.POST, value = "/getCity.do")
    public @ResponseBody
    Map<String, Object> cityMessage(HttpServletRequest request,
            HttpServletResponse response) {
        ActivityModelMap modelMap = new ActivityModelMap(request);
        // 根据省份获得市
        pssCityService.getPssCityByProvince(request, modelMap);
        return modelMap.getModelMap();
    }

    /**
     * 获取县信息
     **/
    @RequestMapping(method = RequestMethod.POST, value = "/getTown.do")
    public @ResponseBody
    Map<String, Object> townMessage(HttpServletRequest request,
            HttpServletResponse response) {
        ActivityModelMap modelMap = new ActivityModelMap(request);
        // 根据市获得县
        pssTownService.getPssTownByCity(request, modelMap);

        return modelMap.getModelMap();
    }

    /**
     * 修改保存用户信息
     **/
    @RequestMapping(method = RequestMethod.POST, value = "/saveUserMessage.do")
    public @ResponseBody
    Map<String, Object> saveUserMessage(Users user, HttpServletRequest request,
            HttpServletResponse response) {
        ActivityModelMap modelMap = new ActivityModelMap(request);
        // 获得当前登录用户的信息
        ExtendUsers eUser = (ExtendUsers) request.getSession().getAttribute(
                "CURRENT_USER_INFO");
        // 根据用户的Id更新用户信息
        if (usersService.updateUserInfoById(user, eUser, modelMap)) {
            modelMap.put("status", "success");
            modelMap.put("data", "更新用户信息成功!");
        }
        return modelMap.getModelMap();
    }
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1093次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论