layui多级联动下拉框的实现_简单三级联动的实现

当我们做一些例如注册页面的时候，可能会遇到要选择地址的操作，这时会出现三个选择框，当你选择省级单位的时候会自动在选择筐中，弹出她所属的市级单位的列表，当选择市级单位时又会弹出县级单位，我们要实现的就是这样的三级联动，当然也会有更简单的插件方法，但学习，我们可以通过这来看它运行的过程。我么要实现的需求是这样的：

• 页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
• 选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
• 出现对应的该市下面的区/县信息

分析这个实现过程大致可以这样：

• 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