省市联动

来源：互联网发布：2017剑三萝莉捏脸数据编辑：程序博客网时间：2024/05/01 22:15

页面效果：

<form id="jvForm" method="post"><ul class="uls form"><li id="errorName" class="errorTip" style="display:none">${error}</li><li><label for="username"><samp>*</samp>收货人姓名：</label><span class="bg_text"><input type="text" id="name" name="name"  maxLength="100" /></span><span class="pos"><span class="tip okTip"> </span></span></li><li><label for="residence"><samp>*</samp>地　　址：</label><span class="word"><select  onchange="changeProvince(this.value)" id="province"><option value="" selected>省/直辖市</option><c:forEach items="${provinces }" var="province"><option value="${province.code }">${province.name }</option></c:forEach></select><select id="city"  onchange="changeCity(this.value)"><option value="" selected>城市</option><option value=""></option></select><select id="town"><option value="" selected>县/区</option><option value=""></option></select></span></li><li><label for="nick"><samp>*</samp>街道地址：</label><span class="bg_text"><input type="text" id="addr" name="addr" maxLength="32"/></span><span class="pos"><span class="tip errorTip">用户名为4-20位字母、数字或中文组成，字母区分大小写。</span></span></li><li><label for="telphone"><samp>*</samp>联系电话：</label><span class="bg_text"><input type="text" id="phone" name="phone" maxLength="32"/></span><span class="pos"><span class="tip warningTip">用户名为4-20位字母、数字或中文组成，字母区分大小写。</span></span></li><li><label for="statusAddr"> </label><span><input type="checkbox" name="isDef" id="isDef" />设为默认收货地址</span></li><li><label for=""> </label><input type="button" onclick="addAddr()" value="保存" class="hand btn66x23" /></li></ul></form>

1.获取所有的省份

public String deliverAddress(HttpServletRequest request,HttpServletResponse response,ModelMap model){//1:此用户的所有收货地址Buyer buyer = (Buyer) sessionProvider.getAttribute(request, response, Constants.BUYER_NAME);AddrQuery addrQuery = new AddrQuery();addrQuery.setBuyerId(buyer.getUsername());List<Addr> addrs = addrService.getAddrList(addrQuery);model.addAttribute("addrs", addrs);//2:省List<Province> provinces = provinceService.getProvinceList(null);model.addAttribute("provinces", provinces);return "buyer/deliver_address";}

//县/区@RequestMapping(value = "/buyer/getTown.shtml")public void getCity(String code,HttpServletRequest request,HttpServletResponse response,ModelMap model){//3:县TownQuery townQuery = new TownQuery();townQuery.setCity(code);List<Town> towns = townService.getTownList(townQuery);JSONObject jo = new JSONObject();jo.put("towns",towns);response.setContentType("application/json;charset=UTF-8");try {response.getWriter().write(jo.toString());} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}

//城市 @RequestMapping(value = "/buyer/getCity.shtml")public void getTown(String code,HttpServletRequest request,HttpServletResponse response,ModelMap model){//3:市 CityQuery cityQuery = new CityQuery();cityQuery.setProvince(code);List<City> citys = cityService.getCityList(cityQuery);JSONObject jo = new JSONObject();jo.put("citys",citys);response.setContentType("application/json;charset=UTF-8");try {response.getWriter().write(jo.toString());} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}

2.根据所选的省份id，获取该省份下的所有城市

//省function changeProvince(code){//拿到Code//var url = "/buyer/getCity.shtml";var params = {"code" : code};$.post(url,params,function(data){//listvar citys = data.citys;var html = '<option value="" selected>城市</option>';for(var i=0;i<citys.length;i++){html += '<option value="' +  citys[i].code +'">' +  citys[i].name +'</option>';}$("#city").html(html);},"json");}//市function changeCity(code){//拿到Code//var url = "/buyer/getTown.shtml";var params = {"code" : code};$.post(url,params,function(data){//listvar towns = data.towns;var html = '<option value="" selected>县/区</option>';for(var i=0;i<towns.length;i++){html += '<option value="' +  towns[i].code +'">' +  towns[i].name +'</option>';}$("#town").html(html);},"json");}

0 0