JSP省市区三级联动下拉选

本文介绍如何使用JSP+jQuery+Oracle实现省市区三级联动的下拉选菜单功能。详细展示了从页面布局到后台数据获取的全过程,并提供了完整的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;
	}

	@Override
	public String toString() {
		return "Area [id=" + id + ", aName=" + aName + ", pid=" + pid
				+ ", status=" + status + "]";
	}
	
}
5.Service层

@Service
@Transactional(readOnly = true)
public class AreasService  {

	@Resource
	private 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")
@Controller
public 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





评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qigc_0529

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值