国家省市县三级联动

来源：互联网发布：mac系统盗版软件编辑：程序博客网时间：2024/04/27 17:33

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

Spring+SpringＭＶC+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