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

最新推荐文章于 2025-09-13 09:17:31 发布

原创最新推荐文章于 2025-09-13 09:17:31 发布 · 置顶 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#office #javascript #search #function #数据库 #email

asp 同时被 2 个专栏收录

30 篇文章

订阅专栏

Javascript

9 篇文章

订阅专栏

本文介绍了一种可接收返回值的多级联动下拉列表函数实现方法，该方法能够适用于二级、三级乃至无限级的联动场景。通过一个示例展示了如何在网页中实现这一功能。

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

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

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

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

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

理论知识：

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

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

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

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

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

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

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

多级联动函数介绍：

view plain copy to clipboard print ?

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

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

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

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

引用本页地址： http://www.yongfa365.com/item/ErJiLianDongSanJiLianDongDuoJiLianDongWuXianJiLianDongXiaLaLieBiaoHuoCaiDanZhuanTi.html