springmvc+spring+mybatis+jquery+js动态读取省市区数据

业务要求：

添加数据：省市区数据从后台读取，前台根据选择的省，联动展示市，区

修改数据：省市区数据从后台读取，默认展示选中的数据，然后可以重新省，联动查询市，区

页面效果：

初始化：

选择省，联动查询市，区，小区

添加页面：

<!-- Modal:添加店铺 --><div class="modal fade" id="addStore"  role="dialog" aria-hidden="true"><div class="modal-dialog" style="width:800px;">    <div class="modal-content">  <div class="modal-header">  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>  <h4 class="modal-title">添加店铺</h4>   </div>    <form role="form" class="form-horizontal" id="addStoreForm" method="post" action="addMyStore.htm" enctype="multipart/form-data"  >            <div class="modal-body">                <div class="modal_form">                    <div class="form-group">                  <label class="control-label col-sm-4"><span class="text-danger">*</span>所在小区：</label>                 <div class="col-sm-1"></div>                 <div class="col-sm-4">                  <select class="form-control required province" name="storeProvince" onchange="changeProvince('addStore',this.options[this.options.selectedIndex].value)"></select>                 </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control city" name="storeCity" onchange="changeCity('addStore',this.options[this.options.selectedIndex].value)"></select>                    </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control district" name="storeCounty"  onchange="changeDistrict('addStore',this.options[this.options.selectedIndex].value)"></select>                    </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control required village"  name="storeVillage" onchange="changeVillage('addStore')"></select>                    </div>                           </div>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-primary" onclick="saveMyStore();">保存</button>                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>            </div>      </form></div>  </div></div> 

编辑页面：

<!-- Model:编辑店铺 --><div class="modal fade" id="editStore"  role="dialog" aria-hidden="true">    <div class="modal-dialog" style="width:800px;">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>                <h4 class="modal-title">编辑店铺</h4>            </div>            <form role="form" class="form-horizontal" id="editStoreForm" method="post" action="editMyStore.htm" enctype="multipart/form-data" >            <div class="modal-body">                <div class="modal_form">                     <div class="form-group">                  <label class="control-label col-sm-4"><span class="text-danger">*</span>所在小区：</label>                  <div class="col-sm-1"></div>                  <div class="col-sm-4">                    <select class="form-control required province" name="storeProvince" onchange="changeProvince('editStore',this.options[this.options.selectedIndex].value)" ></select>                    </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control city" name="storeCity" onchange="changeCity('editStore',this.options[this.options.selectedIndex].value)" ></select>                    </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control district" name="storeCounty" onchange="changeDistrict('editStore',this.options[this.options.selectedIndex].value)"></select>                    </div>                    <div class="col-sm-1"></div>                    <div class="col-sm-4">                    <select class="form-control required village"  name="storeVillage" onchange="changeVillage('editStore')"></select>                    </div>                </div>                </div>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-primary" onclick="editMyStore();">保存</button>                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>            </div>            </form>        </div>    </div></div> 

js写法：

/** * 初始化 */$(function(){//添加店铺加载省份loadProvice('addStore');//编辑店铺加载省份loadProvice('editStore');});/** * 加载省份 * @param modalId  模态框id */function loadProvice(modalId){$.ajax({        type: 'post',        url:'getAllProvince.htm',        async:false,        cache:false,        success: function(data) {            var options = "";            options +=  "<option value=''>"+"请选择"+"</option>";            if(data!=null){            for( var i=0; i<data.length; i++){            var province=data[i];            options +=  "<option value='"+province.provinceId+"'>"+province.provinceName+"</option>";            }            $("#"+modalId).find(".province").html(options);            }        }    });//根据省份编号加载该省份下所有城市    loadCity(modalId,$("#"+modalId).find(".province").val());};/** * 根据省份编号加载该省份下所有城市 * @param modalId 模态框id * @param pId 省份编号 */function loadCity(modalId,pId){    $.ajax({        type: 'post',        url:'getAllCityByPid.htm',        async:false,        cache:false,        data:{"provinceId":pId},        dataType:"json",        success: function(data) {        var options = "";            if(data.length!=0){                for( var i=0; i<data.length; i++){                    var city=data[i];                    options +=  "<option value='"+city.cityId+"'>"+city.cityName+"</option>";                }                $("#"+modalId).find(".city").html(options);            }else{            $("#"+modalId).find(".city").html("<option value='' >"+"请选择"+"</option>");                $("#"+modalId).find(".district").html("<option value='' >"+"请选择"+"</option>");                $("#"+modalId).find(".village").html("<option value='' >"+"请选择"+"</option>");             }        }    });    //根据城市编号加载该城市下所有区县    loadDistrict(modalId,$("#"+modalId).find(".city").val());}/** * 根据城市编号加载该城市下所有区县 * @param modalId 模态框id * @param cId 市（城市） */function loadDistrict(modalId,cId){    $.ajax({        type: 'post',        url:'getAllDistrictByCid.htm',        async:false,        cache:false,        data:{"cityId":cId},        dataType:"json",        success: function(data) {        var options = "";            if(data.length != 0){                for( var i=0; i<data.length; i++){                    var district=data[i];                    options +=  "<option value='"+district.districtId+"'>"+district.districtName+"</option>";                }                $("#"+modalId).find('.district').html(options);            }else{            $("#"+modalId).find('.district').html("<option value='' >"+"请选择"+"</option>");            $("#"+modalId).find(".village").html("<option value='' >"+"请选择"+"</option>");            }        }    });    // 根据区县编号加载该区县下所有城市小区    loadVillage(modalId,$("#"+modalId).find(".district").val());}/** * 根据区县编号加载该区县下所有城市小区 * @param modalId  模态框id * @param DId 区县id */function loadVillage(modalId,dId){$.ajax({        type: 'post',        url:'getAllCountryByDid.htm',        async:false,        cache:false,        data:{"districtId":dId},        dataType:"json",        success: function(data) {        var options = "";            if(data.length != 0){                for( var i=0; i<data.length; i++){                    var village=data[i];                    options +=  "<option value='"+village.villageId+"'>"+village.villageName+"</option>";                }                $("#"+modalId).find('.village').html(options);            }else{            $("#"+modalId).find('.village').html("<option value='' >"+"请选择"+"</option>");            }        }    });}/** * 省份改变时触发事件 * @param modalId 模态框id */function changeProvince(modalId,pId){loadCity(modalId,pId);}/** * 城市改变时触发事件 * @param modalId 模态框id */function changeCity(modalId,cId){loadDistrict(modalId,cId);}/** * 区县改变时触发事件 */function changeDistrict(modalId,dId){loadVillage(modalId,dId);}/** * 小区改变时触发事件 * @param modalId 模态框id */function changeVillage(modalId){//当改变小区时重新输入经纬度，因为每个小区的经纬度不一样$("#"+modalId).find("input[name=tude]").val('');}/** * 编辑店铺选中的省市区 * @param pId 省份编号 * @param cId 城市编号 * @param dId 区县编号 * @param vId 小区编号 * @param modalId 模态框id */function selectOption(pId,cId,dId,vId,modalId){//测试用//alert("pId:"+pId);alert("cId:"+cId);//alert("dId:"+dId);alert("vId:"+vId);//alert("modalId:"+modalId);//选中省份$("#"+modalId).find(".province option[value='"+pId+"']").prop("selected","selected"); //加载城市loadCity(modalId,pId);//选中城市$("#"+modalId).find(".city option[value='"+cId+"']").prop("selected","selected"); //加载区县loadDistrict(modalId,cId);//选中区县$("#"+modalId).find(".district option[value='"+dId+"']").prop("selected","selected");//加载小区loadVillage(modalId,dId);//选中小区$("#"+modalId).find(".village option[value='"+vId+"']").prop("selected","selected");}

点击编辑弹框显示数据，展示默认选中的省市区，小区

/** * 编辑店铺弹出框并初始化 * @param storeId 店铺id */function editStore(storeId){//清空form表单$("#editStoreForm")[0].reset();//根据店铺id查询店铺信息$.ajax({type:"post",  url: "findStoreInfoById.htm",data:{"storeId":storeId},dataType:"json",success: function(data){//编辑模态框idvar modalId="editStore";//省份编号var pId=data.storeProvince;//城市编号var cId=data.storeCity;//区县编号var dId=data.storeCounty;//店铺所在省市区,小区selectOption(pId,cId,dId,vId,modalId);//弹出编辑店铺模态框$("#editStore").modal("show");}   });}

后台查询数据：

/**     * 查询所有省份     * @return List<ProvinceBean> 省份集合     * @see {@link com.qianjiang.other.bean.ProvinceBean}     */    @RequestMapping("/getAllProvince")    @ResponseBody    public List<ProvinceBean> getAllProvince() {        return customerServiceMapper.selectAllProvince();    }    /**     * 根据省份编号查询该省份下所有城市     * @return List<CityBean> 城市集合     * @see {@link com.qianjiang.other.bean.CityBean}     */    @RequestMapping("/getAllCityByPid")    @ResponseBody    public List<CityBean> getAllCityByPid(Long provinceId) {        return customerServiceMapper.selectAllCityByPid(provinceId);    }        /**     * 根据城市编号查询该城市下所有区县     * @return List<CityBean> 区县集合     * @see {@link com.qianjiang.other.bean.DistrictBean}     */    @RequestMapping("/getAllDistrictByCid")    @ResponseBody    public List<DistrictBean> getAllDistrictByCid(Long cityId) {        return customerServiceMapper.selectAllDistrictByCid(cityId);    }        /**     * 根据区县编号查询所有城市小区     * @param districtId 区县编号     * @return     */    @RequestMapping("/getAllCountryByDid")    @ResponseBody    public List<VillageBean> getAllCountryByDid(Long districtId){    return customerServiceMapper.getAllCountryByDid(districtId);    }

xml文件：

<!-- 查询所有省份-->    <select id="selectAllProvince" resultMap="proviceMap">selectp.province_id,p.province_namefrom t_sys_province pwhere p.del_flag = '0'</select>

 <!-- 查询所有城市根据省份编号-->    <select id="selectAllCityByPid" resultMap="cityMap" parameterType="java.lang.Long">select     c.city_id,c.city_name   from t_sys_city c    where c.province_id = #{provinceId,jdbcType=BIGINT}    and c.del_flag = '0' </select>

<!-- 查询所有区县根据城市编号-->    <select id="selectAllDistrictByCid" resultMap="districtMap" parameterType="java.lang.Long">selectd.district_id,d.district_namefrom t_sys_district dwhere d.city_id = #{cityId,jdbcType=BIGINT}    and d.del_flag = '0' </select>

<!-- 根据区县编号查询所有城市小区 --><select id="getAllCountryByDid" parameterType="java.lang.Long" resultMap="villageMap">select v.id as "village_id",v.name as "village_name" ,v.county as "district_id"from t_village vwhere v.county=#{districtId}</select>

备注：

省，市，区，小区，数据库设计这里均是分开设计，每个表省，市，区，小区等表都是一一关联。