省-市-县联动选择

Myth丶恋晨 2022-05-13 04:34 240阅读 0赞

一，前段 样式

![70][]

三个下拉框

(1) 省<select name="provice" id="provice" class="required pull\_down" style="width:120px"> </select>

(2) 市州<select name="city"  id="city"    class="required pull\_down" style="width:150px" ></select>    
(3) 区县<select name="country" id="country" class="required pull\_down" style="width:160px"></select>

//调用所有的省份

$.post('${ctxm}/register/provice',{},function(data){
              var  provice = JSON.parse(data);
              var li='<option value=0>-------请选择-------</option>';
              for(var i=0;i<provice.length;i++){
                    li +='<option value='+provice[i].code+'>'+provice[i].name+'</option>'   
              }
              $("#provice").html(li);
        })

// 根据省份 调用所有的市

function  city(){
            $("#city").html("");
             $("#city").html('<option value=0>--------请选择-------</option>');
            var id= $("#provice").val(); 
            $.post('${ctxm}/register/city?id='+id,{},function(data){
                  var  city = JSON.parse(data);
                  var li='<option value=0>-------请选择-------</option>';
                  for(var i=0;i<city.length;i++){
                        li +='<option value='+city[i].code+'>'+city[i].name+'</option>'   
                  }
                  $("#city").html(li);
            })      
        }

// 根据市 调用所有的区县

//后台代码

@ResponseBody
     @RequestMapping(value ="provice")
      public  String  provice(@RequestParam(required = false) String extId, HttpServletResponse response){
            response.setContentType("application/json; charset=UTF-8");
            List<Map<String, Object>> list = Lists.newArrayList();
            List<Area> areaList = areaService.findArea("2");
            for(Area area:areaList){
                Map<String, Object>  map = new HashMap<String,Object>();
                map.put("name",area.getName());
                map.put("code",area.getCode());
                list.add(map);    
            }
            return  JsonMapper.toJsonString(list);
        }
        
        @ResponseBody
          @RequestMapping(value ="city")
        public  String  city(@RequestParam(required = false) String id , HttpServletResponse response){
            response.setContentType("application/json; charset=UTF-8");
                 
            List<Map<String, Object>> list = Lists.newArrayList();
            Area areas =areaService.getArea(id);
            List<Area> areaList = areaService.findByParentId(areas.getId());
            for(Area area:areaList){
                Map<String, Object>  map = new HashMap<String,Object>();
                map.put("name",area.getName());
                map.put("code",area.getCode());
                list.add(map);    
            }
            return  JsonMapper.toJsonString(list);
        }
        
        @ResponseBody
        @RequestMapping(value ="country")
        public  String  country(@RequestParam(required = false) String id , HttpServletResponse response){
            response.setContentType("application/json; charset=UTF-8");
            List<Map<String, Object>> list = Lists.newArrayList();
            Area areas =areaService.getArea(id);
            List<Area> areaList = areaService.findByParentId(areas.getId());
            for(Area area:areaList){
                Map<String, Object>  map = new HashMap<String,Object>();
                map.put("name",area.getName());
                map.put("code",area.getCode());
                list.add(map);    
            }
            return  JsonMapper.toJsonString(list);
        }

[70]: /images/20220513/78ebaa1f657d488c8958deb4f8dcc671.png