jquery ajax(2)-----获取省市县/区三级联动

来源：互联网发布：2016淘宝买药货到付款编辑：程序博客网时间：2024/05/17 21:43

jquery ajax(2)—–获取省市县/区三级联动（1）

1.jsp 页面的jquery ajax：注意要引入jquery.min.js

<script>  $(function () {        $("#provSelect").change(function () {            var selValue=$("select option:selected").val();            $("#citySelect option:not(:first)").remove();            $("#distSelect option:not(:first)").remove();            $.ajax({                url:"/region/city",                type:"post",                dataType:"text",                data:"provinceId="+selValue,                success:function (data) {                    var obj=eval(data);                    $.each(obj,function (index,item) {                       // alert(obj[index].id);   $("#citySelect").append("<option value='"+obj[index].id+"'>"   +obj[index].regionName+"</option>");                    })                }             })         })        $("#citySelect").change(function () {            var cityId=$("#citySelect option:selected").val();            alert("cityId=="+cityId);            $("#distSelect option:not(:first)").remove();            $.ajax({               url:"/region/district",                type:"post",                dataType:"text",                data:"cityId="+cityId,                success:function (data) {                    var districtJson=eval(data);                     $.each(districtJson,function (index,item) {                        $("#distSelect").append("<option>"+                        districtJson[index].regionName+"</option>");                    })                }            })        })    }) </script>

2.jsp页面如下：

 <li> <select id="provSelect" class="on">  <option name="prov_9999" value="9999">请选择省份...</option>  <c:forEach items="${province}" var="pro"><option name="prov_34" id="pro_id" value="${pro.id}">${pro.regionName}</option>      </c:forEach>   </select>  </li><li id="citySelectArea" style="">  <select id="citySelect"><option selected="selected" name="city_244" value="244">请选择城市</option>       <%--<c:forEach items="${city}" var="city">         <option name="city_245" value="245">${city.regionType}</option>       </c:forEach>--%>   </select></li><li id="distSelectArea">     <select id="distSelect">       <option name="dist_9999" value="9999" >请选择地区/县</option>      </select> </li>

3.springMVC 后台controller 关键加@ResponseBody：

/*获取省份*/@RequestMapping("/province")@ResponseBodypublic void findProvince(Model model){    int regionType=1;    List<Region> regionList=regionService.findByParentId(1);    model.addAttribute("region",regionList); }/*（2）获取城市*/@RequestMapping("/city")@ResponseBody public List<Region> findCity(@Param("city")String city, Model model){    //  int regionType=3;    System.out.println("controller city=="+city);    int regionType=Integer.parseInt(city);    List<Region> regionList=regionService.findByParentId(regionType);    model.addAttribute("city",regionList);     return regionList;}/*获取区/县*/@RequestMapping("/district")@ResponseBodypublic List<Region> findDistrict(@Param("cityId")String cityId, Model model){     int regionType=Integer.parseInt(cityId);    List<Region> regionList=regionService.findByParentId(regionType);     return regionList;}

4.Region实体类:

@Entity@Table(name = "region")public class Region {@Id@GeneratedValue@Column(name = "region_id")private long id;@Column(name = "parent_id")private int parentId;@Column(name = "region_name")private String regionName;@Column(name = "region_type")private int regionType; setter、getter此处省略... }

0 0