SSM+ajks城市二级联动

省市二级联动

前台

 

籍贯：省<select name="sheng" id="sheng">
       <option>======请选择======</option>
       </select>
市<select name="shi" id="shi">

<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

$.get("/sheng.do",{pid:0},function (data) {
    for (var i = 0; i <data.length; i++) {
        $("#sheng").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>");
    }
})

$("#sheng").change(function () {
    $("#shi").text("");
   var shengname= $("#sheng option:selected").attr("value");
    $.get("/shi.do",{shengname:shengname},function (data) {
        for (var i = 0; i <data.length; i++) {
            $("#shi").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>")
        }
    })
})

后台逻辑

 

@RequestMapping(value ="/sheng",produces = "application/json;charset=utf-8")
@ResponseBody
public String sheng(int pid) {
    List<City> list = userService.findshengById(pid);
    return JSON.toJSONString(list);
}

@RequestMapping(value = "/shi",produces = "application/json;charset=utf-8")
@ResponseBody
public String shi(String shengname) {
    int id= userService.findsxhiByName(shengname);
    List<City> list = userService.findshengById(id);
    return JSON.toJSONString(list);
}

 

 

@Select("select * from city where id=#{value}")
List<City> findshiById(int id);

@Select("select * from city where pid=#{value}")
List<City> findshengById(int pid);

@Select("select * from city where name=#{value}")
int findsxhiByName(String shengname);