二级联动 三级联动 多级联动 无限级联动下拉列表或菜单专题

三维数组数据源
  A     B     C  
--------------------------------------------------------------------------------------------------
AA BB CC  
--------------------------------------------------------------------------------------------------
二维数组数据源
A1 B1

专题名称：一个网页内多个数组数据源（二维或三维数组）无刷新实现多个二级联动或多级联动下拉列表

关键词组：二级联动，三级联动，多级联动，无限级联动

推荐阅读顺序：先看实例，如果有不明白的地方再看理论知识

理论知识：

二级联动及多级联动的理论知识：

二级联动，简单的说就是，当下拉列表A1的的值改变时，下一级下拉列表B1也跟着动，但是下拉列表B1的值是与下拉列表A1的值相对应的。比如：A1选中“技术部”的话，B1的所有下拉项都显示的是与A1相对应的技术部成员，这个过程因为都是在客户端执行的不会在服务器端操作所以是无刷新实现的。

三级联动或多级联动，就是利用二级联动的思想，第一级改变时，第二级跟着变，第三级跟着第二级变，第四级跟着第三级变。。。。

二级联动，三级联动，多级联动实践：

二级联动，当第一级选中一个改变选项，激发联动函数，这个函数用以改变第二个下拉列表的值，实现过程是，根据第一级传过来的值遍历数组，找到与第一级相对应的选项，然后加到第二级列表上。

三级联动或多级联动，第一级改变时，第二级跟着变，第二级改变时，第三级跟着变。。。

此专题源与：二级联动下拉列表的实现是通过一个函数来实现的，如果在实现三级联动下拉列表或多级联动下拉列表的话，我们是直接复制二级联动下拉列表的函数，改一下函数名及相关参数，这样是可以解决问题的，但咱们是做程序的，应该让自己的程序更通用话，尽量适应各种情况，如果这样一来，平白的又添加了一个函数，并且如果是多级的话您就得重写这个函数多次，然而，您也许会想到，多级联动下拉列表与二级其实思想是一样的，那么我们为什么不能用一个函数来实现呢，并且一定是可以实现的，你相信能实现，我也想信能实现，事实是它就能实现，但这样实现的人很少，为什么呢，一般都觉得没这个必要，但每次遇到这样的问题时还是得研究半天，今天我要给大家介绍的是，一个函数来实现多级联动，使用的是类似与递归的思想，每一级onchange()时都会调用一个函数，这个函数会改变下一级的值并激发其onchange()，这时下一级的onchange里如果还是调用这个函数的话，那么这个函数还会再次运行，直到最后一级，因为最后一级onchange=""所以他不会再激发下一级，完成所有联动。

多级联动函数介绍：

/*=========================================================================
 * Intro       可接收返回值的多级联动下拉列表函数
 * FileName    ChangeSelect.js
 * Author      yongfa365
 * Version     v2.0
 * WEB         http://www.yongfa365.com
 * Email       yongfa365[at]qq.com
 * MadeTime    2007-11-13 17:09:46
 * LastModify  2008-10-23 21:56:53
 *==========================================================================*/

/*
数组数据源可以接受两种：
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
<SCRIPT language=JavaScript>ChangeSelect('0','province','110000',ArrCity3,'请选择省') </SCRIPT>


*/
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();
}

以下代码为一个浓缩版多级联动演示：

<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> <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 />
可修改代码后再运行

 备注：此文最上面的几个联动相关代码下载下去也许不能使用，因为本页是utf-8格式的，为了能让上面的联动运行正常，所以相关JS文件都改成了utf-8 格式，如果您要使用的话可以将其转为gb2312格式来用，做此说明主要是上面的省市三级联动代码的JS数据库使用的是信息产业部最新发布的数据。比较有用且权威，原下载地址：最新省市县数据库 

本专题相关数据库下载