国家省市县三级联动

原创 2016年08月30日 16:40:24

该模块是在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();
    }
版权声明:本文为博主原创文章,未经博主允许不得转载。

完整的省市县三级联动

本文向大家展示一个demo,实现完整的中国地区省-市-县三级联动查询。此查询不用通过数据库查询,直接通过加载js文件即可。 效果: html代码如下: "...
  • xie_xiansheng
  • xie_xiansheng
  • 2016年03月16日 00:13
  • 4236

省市县三级联动(数据库)

很多项目中,注册用户和注册企业时需要用到省市县三级联动的情况,自己整理了一下。前端主要是jquery easyui做的。 页面效果: 目录结构: 项目源码地址: https://githu...
  • u010880345
  • u010880345
  • 2016年01月05日 11:26
  • 6685

省市县(区三级联动) 实现方法

最近在写前端的时候,由于要实现,省市县三级联动,网上插件也挺多,不过为了锻炼自己(坑爹的公司,从前端写到后端(原生),从移动写到pc,从androidAPP到iosAPP(react-native写得...
  • jiejiegua
  • jiejiegua
  • 2017年01月09日 17:35
  • 2591

AJAX和WebService实现省市县三级联动

-------------------------------------WebService1.asmx--------------------------------------- // 若...
  • liu_111111
  • liu_111111
  • 2013年05月22日 17:20
  • 1535

前端省市区(县)三级联动下拉框

调用省市区的思想要先确定下来,一般是有多处调用,所以将省市区三级联动抽取为工具js! 静态页面例子: add...
  • ghjzzhg
  • ghjzzhg
  • 2017年06月22日 16:45
  • 3178

黑马程序员 C#学习笔记⑤ 省市县三级联动查询

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流! ----------------------详细请查看:www.itheima.com ...
  • u010632993
  • u010632993
  • 2014年03月19日 17:14
  • 1652

web前端之省市县三级联动

  • u014785563
  • u014785563
  • 2016年11月04日 14:55
  • 3085

全国省市县三级地址联动js

整理截至2016-03-17,地址数据来自高德地图
  • qq_22959673
  • qq_22959673
  • 2016年03月17日 18:09
  • 1460

省市县三级联动xml

北京 北京 北京
  • Mr_chenhao
  • Mr_chenhao
  • 2016年11月07日 10:21
  • 518

省市县三级联动demo

省市县三级联动demo
  • woshimuyi1025
  • woshimuyi1025
  • 2016年08月06日 10:01
  • 1266
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:国家省市县三级联动
举报原因:
原因补充:

(最多只允许输入30个字)