二级联动，简单的说就是，当下拉列表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" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
//ChangeSelect(上一级的值,下一级Select控件的ID值,下一级Select控件要选中的值(即value而非text),数据源数组名,默认显示字符(如:请选择...如果不写的话会用默认值填充))，第一级的上级值为0
function ChangeSelect(ParentValue, NextId, NextSelectedValue, ArrObj,DefaultStr)
{
StrObj = eval(document.getElementById(NextId));
StrObj.length = 0;
//判断它是二级数据源，还是三级
if (ArrObj.length > 0)
{
if (ArrObj[0].length == 2)
{ArrNum = 0;}
else
{ArrNum = 2;}
}
//显示所有列表
for (i = 0; i < ArrObj.length; i++)
{
if (i == 0)
{
if (DefaultStr == undefined ) DefaultStr="==请选择==";
StrObj.options[StrObj.length] = new Option(DefaultStr, "");
}
if (ArrObj[i][1] == ParentValue)
{
StrObj.options[StrObj.length] = new Option(ArrObj[i][0],ArrObj[i][ArrNum]);
}
}
//选中列表内某一项
for (i = 0; i < StrObj.length; i++)
{
if (StrObj.options[i].value == NextSelectedValue)
{
StrObj.options[i].selected = true;
}
}
//激发下一级的onchange事件以实现多级级联
StrObj.onchange();
}
//公司二维数组数据源
Office = [
["CategoryName","ParentCategoryName"],
["业务部","0"],
["技术部","0"],
["市场部","0"],
["业务部小柳","业务部"],
["业务部小杨","业务部"],
["业务部小菜","业务部"],
["技术部老柳","技术部"],
["技术部老杨","技术部"],
["技术部老菜","技术部"],
["市场部柳先生","市场部"],
["市场部杨先生","市场部"],
["市场部菜鸟","市场部"]
]
//省市二维数组数据源
City2 = [
["CategoryName","ParentCategoryName"],
["山西省","0"],
["河北省","0"],
["太原市","山西省"],
["运城市","山西省"],
["石家庄","河北省"],
["廊房","河北省"]
]
//省市三维数组数据源
City3 = [
["CategoryName","ParentId","Id"],
["北京","0","010"],
["山西","0","0359"],
["朝阳区","010","001"],
["海淀区","010","002"],
["豆各庄","001","101"],
["十里堡","001","102"],
["中关村","002","201"],
["上地","002","202"],
["运城地区","0359","301"],
["太原市","0359","302"],
["永济市","301","311"],
["小区","302","312"]
];
</script>
</head>
<body>
<select id="office1" onchange="ChangeSelect(this.value,'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>
中国足彩网信息请查看IT技术专栏
2025国考·省考课程试听报名
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
