![2bb0453aa4df6349d7e17a14078aa962.png](https://i-blog.csdnimg.cn/blog_migrate/17b2980c8e27267bf02925bf2de23fd0.png)
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是这样的三级联动,当然也会有更简单的插件方法,但学习,我们可以通过这来看它运行的过程。我么要实现的需求是这样的:
- 页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
- 选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
- 出现对应的该市下面的区/县信息
分析这个实现过程大致可以这样:
- 1、创建页面:页面中有三个下拉框,分别为省、市、区/县
- 2、页面加载成功发起ajax请求,请求省的信息,并将响应结果 填充到省下拉框中
- 3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求 请求该省下的市信息,并将响应数据填充到市下拉框
- 4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求 请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库呢我们可以这样去构建:
创建表(area):存储了省、市、区/县信息
- 设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。
- 地区id:areaid
- 地区名:areaname
- 设计表实现二:
- 地区id:areaid
- 地区名:areaname
- 地区上级id:parentid
建表语句:
Create table area (areaid int auto_increment primary key,areaname varchar(10) not null,
parenteid int(20) not null,arealevlel int(2) not null,status int(3) not null)
创建好表之后就可以进行项目的构建了,在mvc思想下进行项目分层:
首先在pojo层新建实体类Area,他的属性为:要添加共有取值赋值方法等,带参无参构造等;
package com.bjsxt.p