一网情深 >> 精选代码 >> 列表特效代码 >> 二级联动三级联动多级联动无限级联动下拉列表或菜单专题 > 正文

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

[来源：来自网络] [作者：不详] [日期：2008-01-14] [热度：]

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

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

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

理论知识：

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

二级联动，简单的说就是，当下拉列表A1的的值改变时，下一级下拉列表B1也跟着动，但是下拉列表B1的值是与下拉列表A1的值相对应的。比如：A1选中“技术部”的话，B1的所有下拉项都显示的是与A1相对应的技术部成员。

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

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

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

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

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

多级联动函数介绍：

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


/*
数组数据源可以接受两种：
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)
{
    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)
        {
            StrObj.options[StrObj.length] = new Option("- 请选择 -", "");
        }
        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数据库使用的是信息产业部最新发布的数据。比较有用且权威，原下载地址：最新省市县数据库<a href="http://www.miibeian.gov.cn/chaxun/xgxz1.jsp?id=4" target="_blank">http://www.miibeian.gov.cn/chaxun/xgxz1.jsp?id=4</a>&wjm=省市县代码表(2007-10-11)

原文：http://www.yongfa365.com/Item/ErJiLianDongSanJiLianDongDuoJiLianDongWuXianJiLianDongXiaLaLieBiaoHuoCaiDanZhuanTi

Tags:二级联动三级联动多级联动

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

相关文章

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