JSP省市区三级联动下拉选

来源：互联网发布：算法流程图怎么画编辑：程序博客网时间：2024/05/22 05:22

JSP+Jquery+Oracle实现省市区三级联动下拉选菜单

自己搞了一下午,刚开始觉得还有点麻烦,不过搞过一遍之后就觉得简单了,供大家互相学习,具体代码如下:

1.jsp页面代码：

</pre><pre name="code" class="html"><tr>                <td>所在地:</td>                <td>                    <select class="select" id="province_code" name="province_code" onchange="getCity()">                        <option value="">请选择</option>                    </select>                    <select class="select" id="city_code" name="city_code" onchange="getArea()">                        <option value="">请选择</option>                    </select>                    <select class="select" id="area_code" name="area_code">                        <option value="">请选择</option>                    </select>                </td>            </tr>

2.js代码

<script type="text/javascript">    /*加载省下拉选*/    $(function () {        $.ajax({            type: "post",            url: "${ctx}/shop/area/getProvince",            success: function (data) {                for (var i = 0; i < data.length; i++) {                    $('#province_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");                }            },            error: function () {                alert("加载省失败");            }        });    });    /*加载市下拉选*/    function getCity() {        var id = $("#province_code").val();        $("#city_code").empty();        $("#area_code").empty();        $.ajax({            type: "post",            url: "${ctx}/shop/area/getCity",            data: {"id": id},            success: function (data) {                $('#city_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");                $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");                for (var i = 0; i < data.length; i++) {                    $('#city_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");                }            },            error: function () {                alert("加载市失败");            }        });    }    ;    /*加载地区下拉选*/    function getArea() {        var id = $("#city_code").val();        $("#area_code").empty();        $.ajax({            type: "post",            url: "${ctx}/shop/area/getArea",            data: {"id": id},            success: function (data) {                $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");                for (var i = 0; i < data.length; i++) {                    $('#area_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");                }            },            error: function () {                alert("加载区失败");            }        });    }

3.dao层文件

public interface AreaDao {List<Area> queryAreas(Integer pid);Area queryAreasInfo(Integer id);public List<Area> queryCity(Integer id);}

4.Area实体类

public class Area {private Integer id;private String aName;private Integer pid;private Integer status;public Integer getId() {return id;}public Integer getPid() {return pid;}public Integer getStatus() {return status;}public void setId(Integer id) {this.id = id;}public void setPid(Integer pid) {this.pid = pid;}public void setStatus(Integer status) {this.status = status;}public String getaName() {return aName;}public void setaName(String aName) {this.aName = aName;}@Overridepublic String toString() {return "Area [id=" + id + ", aName=" + aName + ", pid=" + pid+ ", status=" + status + "]";}}

5.Service层

@Service@Transactional(readOnly = true)public class AreasService  {@Resourceprivate AreaDao areasDao;/** * 通过pid查询Areas */public List<Area> queryAreas(Integer pid) {return this.areasDao.queryAreas(pid);}public Area queryArea(Integer id){return this.areasDao.queryAreasInfo(id);}}

6.Controller层

@RequestMapping("/shop/area")@Controllerpublic class AreaController {    @Autowired    private AreasService areasService;    @RequestMapping(value="getProvince" ,method  = RequestMethod.POST)    @ResponseBody    public List<Area> getProvince(){        List<Area> areas=areasService.queryAreas(0);        return areas;    }    @RequestMapping(value="getCity" ,method  = RequestMethod.POST)    @ResponseBody    public List<Area> getCity(Integer id){        List<Area> areas=areasService.queryAreas(id);        return areas;    }    @RequestMapping(value="getArea" ,method  = RequestMethod.POST)    @ResponseBody    public List<Area> getArea(Integer id){        List<Area> areas=areasService.queryAreas(id);        return areas;    }}

7.Mapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" ><mapper namespace="com.***.location.dao.AreaDao" >    <select id="queryAreas" resultType="Area" >        SELECT * FROM area WHERE  pid=#{pid}    </select>    <select id="queryAreasInfo" resultType="Area" >        SELECT * FROM area WHERE  id=#{id}    </select></mapper>

8.Oracle数据库结构

省市区在一个表，表名是AREA ，主键是ID ，省的PID=0 ，市级的PID=省的ID，区级的PID=市级的ID

如：

ID ANAME PID

100034 河南省 0

100101 郑州市 100034

100102 濮阳市 100034

111111 中原区 100101

111112 金水区 100101

111113 高新区 100101

0 0