自制三级联动下拉框

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年7月26日

首先解析一下三级联动下拉框，三级联动下拉框将一条消息展开后的多条信息，再选中其中一条信息，有会出现与这条消息所包含的信息。就是把三个有彼此关系的三个下拉框的动态连接。以学校为例，学校有18级，19级，假如18级里有1班、2班、3班，19级有4班、5班、6班。选中学校时会出现18级和19级，再选中18级时，就会出现1班、2班、3班。（效果如下）

这个效果不是用“select”标签来实现的，而是用ul和li组合实现。
这是静态的三个ul下拉框。 其中overflow:scroll的属性是打开滚动条属性。
避免下拉框太长影响用户体验。要下拉框并并排显示就在下图dropDown中添加
display:flex;

先加载学校下拉框，并进行回填。

用post请求回调两个数据，第一个是学校ID,第二个是学校名称，再用“for循环”循环获取数据，用来拼接li标签，最后赋值给学校下拉框相对应的“ul”标签。

然后是选中学校，就会显示相对应的年级。

因为我在“学校 li”标签里添加了，“οnmοuseοver="onProvLi(this)”事件，“onmouseover”就是鼠标移入事件。就是当鼠标移动到“学校 li”标签时，会触发
” onProvLi(this)”的方法。onProvLi()会获取“学校 li”标签时的“学校ID”和
“学校名称”，“学校名称”可以回显到input标签，而“学校ID”则作为post请求的参数，用来筛选“学校”相对应的年级。返回的数据，第一个是年级ID,第二个是年级名称，再用“for循环”循环获取数据，用来拼接li标签，最后赋值给年级下拉框相对应的“ul”标签。(操作如上)
最后是选中年级，就会显示相对应的班级。

过程跟上面的一样，我就重复不写了。