二级联动，简单的说就是，当下拉列表a1的的值改变时，下一级下拉列表b1也跟着动，但是下拉列表b1的值是与下拉列表a1的值相对应的。比如：a1选中“技术部”的话，b1的所有下拉项都显示的是与a1相对应的技术部成员，这个过程因为都是在客户端执行的不会在服务器端操作所以是无刷新实现的。
三级联动或多级联动，就是利用二级联动的思想，第一级改变时，第二级跟着变，第三级跟着第二级变，第四级跟着第三级变。。。。
二级联动，三级联动，多级联动实践：
二级联动，当第一级选中一个改变选项，激发联动函数，这个函数用以改变第二个下拉列表的值，实现过程是，根据第一级传过来的值遍历数组，找到与第一级相对应的选项，然后加到第二级列表上。
三级联动或多级联动，第一级改变时，第二级跟着变，第二级改变时，第三级跟着变。
二级联动下拉列表的实现是通过一个函数来实现的，如果在实现三级联动下拉列表或多级联动下拉列表的话，我们是直接复制二级联动下拉列表的函数，改一下函数名及相关参数，这样是可以解决问题的，但咱们是做程序的，应该让自己的程序更通用话，尽量适应各种情况，如果这样一来，平白的又添加了一个函数，并且如果是多级的话您就得重写这个函数多次，然而，您也许会想到，多级联动下拉列表与二级其实思想是一样的，那么我们为什么不能用一个函数来实现呢，并且一定是可以实现的，但这样实现的人很少，为什么呢，一般都觉得没这个必要，但每次遇到这样的问题时还是得研究半天，今天我要给大家介绍的是，一个函数来实现多级联动，使用的是类似与递归的思想，每一级onchange()时都会调用一个函数，这个函数会改变下一级的值并激发其onchange()，这时下一级的onchange里如果还是调用这个函数的话，那么这个函数还会再次运行，直到最后一级，因为最后一级onchange=所以他不会再激发下一级，完成所有联动。
数组数据源可以接受两种：
1.[categoryname,parentcategoryname] 即：[当前名称,父级名称]
2.['categoryname','parentid','nowid'] 即：[当前名称,父级id,当前id]
上面说的父级，如果本身就是最上一级，那么父级就写成0或0
调用方法：
网页各级联（联动）下拉列表必须含有两个属性：id,onchange.
最后一个下拉列表onchange=(空，但必须写上)。
函数调用方法：changeselect(上一级的值,下一级select控件的id值,下一级select控件要选中的值(即value而非text),数据源数组名,默认显示字符(如:请选择...如果不写的话会用默认值填充))，
举例：
第一级<select id=province onchange=changeselect(this.value,'city','',arrcity3,'请选择市') ></select>
第二级<select id=city onchange=changeselect(this.value,'area','',arrcity3) ></select>
第三级<select id=area onchange= ></select>
设置网页加载完后运行一次，可以设置默认值，默认状态下第一个参数是0
看代码：
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
<html xmlns=>
<head>
<meta http-equiv=content-type content="text/html; charset=gbk"'office2','',office,'==人员==') style=width:100px></select>
<select id=office2 onchange= style=width:100px></select>
<script language=javascript type=text/javascript>changeselect('0','office1','',office,'==部门==') </script>
<br />
<select id=city001 onchange=changeselect(this.value,'city002','',city2) style=width:100px></select>
<select id=city002 onchange= style=width:100px></select>
<script language=javascript type=text/javascript>changeselect('0','city001','',city2) </script>
<br />
<select id=city3001 onchange=changeselect(this.value,'city3002','',city3) style=width:100px></select>
<select id=city3002 onchange=changeselect(this.value,'city3003','',city3) style=width:100px></select>
<select id=city3003 onchange= style=width:100px></select>
<script language=javascript type=text/javascript>changeselect('0','city3001','0359',city3) </script>
<br />
</body>
</html>
2025国考·省考课程试听报名
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
