<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript" >
/*
** ==================================================================================================
** 类名:CLASS_LIANDONG_YAO
** 功能:多级连动菜单
**
** 作者:YAODAYIZI
** ==================================================================================================
**/
function CLASS_LIANDONG_YAO(array)
{
//数组,联动的数据源
this.array=array;
this.indexName='';
this.obj='';
//设置子SELECT
// 参数:当前onchange的SELECT ID,要设置的SELECT ID
this.subSelectChange=function(selectName1,selectName2)
{
//try
//{
var obj1=document.all[selectName1];
var obj2=document.all[selectName2];
var objName=this.toString();
var me=this;
obj1.onchange=function()
{
me.optionChange(this.options[this.selectedIndex].value,obj2.id)
}
}
//设置第一个SELECT
// 参数:indexName指选中项,selectName指select的ID
this.firstSelectChange=function(indexName,selectName)
{
this.obj=document.all[selectName];
this.indexName=indexName;
this.optionChange(this.indexName,this.obj.id)
}
// indexName指选中项,selectName指select的ID
this.optionChange=function (indexName,selectName)
{
var obj1=document.all[selectName];
var me=this;
obj1.length=0;
obj1.options[0]=new Option("请选择",'');
for(var i=0;i<this.array.length;i++)
{
if(this.array[i][1]==indexName)
{
//alert(this.array[i][1]+" "+indexName);
obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
}
}
}
}
</script>
</head>
<body>
<form name="form1" method="post">
<SELECT ID="s1" NAME="s1" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s2" NAME="s2" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s3" NAME="s3">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x1" NAME="x1" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x2" NAME="x2" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x3" NAME="x3">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x4" NAME="x4">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x5" NAME="x5">
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
<script language="javascript">
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID,父级ID,名称
array[1]=new Array("华北地区","根目录","华北地区");
array[2]=new Array("上海","华南地区","上海");
array[3]=new Array("广东","华南地区","广东");
array[4]=new Array("徐家汇","上海","徐家汇");
array[5]=new Array("普托","上海","普托");
array[6]=new Array("广州","广东","广州");
array[7]=new Array("湛江","广东","湛江");
//--------------------------------------------
//这是调用代码
var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
liandong.subSelectChange("s1","s2"); //设置子级选择框
liandong.subSelectChange("s2","s3");
//例子2-------------------------------------------------------------
//数据源
var array2=new Array();//数据格式 ID,父级ID,名称
array2[0]=new Array("测试测试","根目录","测试测试");
array2[1]=new Array("华北地区","根目录","华北地区");
array2[2]=new Array("上海","测试测试","上海");
array2[3]=new Array("广东","测试测试","广东");
array2[4]=new Array("徐家汇","上海","徐家汇");
array2[5]=new Array("普托","上海","普托");
array2[6]=new Array("广州","广东","广州");
array2[7]=new Array("湛江","广东","湛江");
array2[8]=new Array("不知道","湛江","不知道");
array2[9]=new Array("5555","湛江","555");
array2[10]=new Array("++++","不知道","++++");
array2[11]=new Array("111","徐家汇","111");
array2[12]=new Array("222","111","222");
array2[13]=new Array("333","222","333");
//--------------------------------------------
//这是调用代码
//设置数据源
var liandong2=new CLASS_LIANDONG_YAO(array2);
//设置第一个选择框
liandong2.firstSelectChange("根目录","x1");
//设置子选择框
liandong2.subSelectChange("x1","x2")
liandong2.subSelectChange("x2","x3")
liandong2.subSelectChange("x3","x4")
liandong2.subSelectChange("x4","x5")
</script>
</html>
分享到:
相关推荐
本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: [removed] <!– Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3...
### JavaScript 多级联动 Select 实现详解 在前端开发中,多级联动 Select 是一个常见的需求,尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select,包括其核心...
JavaScript 自定义多级联动下拉菜单
总结,创建JavaScript自定义多级联动浮动菜单涉及到以下几个关键步骤: 1. 获取和操作DOM元素。 2. 添加事件监听器,响应用户交互。 3. 修改CSS样式以实现显示、隐藏和浮动效果。 4. 维护数据结构,实现菜单的联动。...
在.NET框架中,`ICallbackEventHandler`接口是一个用于实现页面间无刷新通信的重要工具,尤其在构建复杂的Web应用程序时,如多级联动下拉菜单。这种功能可以提高用户体验,因为用户无需等待整个页面重新加载就能看到...
JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,实现客户端的...通过学习和理解这些知识点,你将能够创建自己的JavaScript多级联动浮动菜单,为网站或应用增加互动性和用户体验。
在本话题中,我们将探讨如何利用JSON来实现多级联动的效果,这是一种常见的前端交互功能,例如在选择省份后自动更新城市选项,或者在选择类别后显示子类别的选项。 多级联动通常涉及到多个下拉框或列表,它们之间...
总结一下,"三级联动 多级联动 JavaScript"是Web开发中的常见功能,它利用JavaScript的事件驱动和DOM操作来实现动态交互。"多级菜单联动.jsp"文件可能是实现这一功能的一个实例,通过解析和理解这个文件,开发者可以...
如果我们要实现多级联动,可以扩展此代码,添加更多的事件监听和条件判断。例如,当选择二级菜单时,可以展示对应的三级菜单: ```javascript $(document).ready(function() { $('#menu > li').click(function() {...
1. JavaScript:作为前端开发的基础语言,JavaScript常用于实现多级联动的逻辑。通过监听事件,改变DOM元素的状态,从而更新关联的选择项。 2. jQuery:一个广泛使用的JavaScript库,简化了DOM操作和事件处理,使得...
总结来说,实现自定义的多级联动下拉菜单涉及HTML布局、JavaScript交互和DOM操作。通过合理地组合这些技术,我们可以创建出功能强大且用户体验优秀的下拉菜单,这在很多Web应用中都是不可或缺的一部分。记得实践是...
### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...
本项目以“多级联动菜单”为主题,结合了HTML的`div`元素、CSS样式以及JavaScript编程,来实现动态交互效果。下面将详细介绍这个主题中的相关知识点。 一、`div`元素 `div`(division)是HTML中最基本的布局容器,...
总的来说,理解和实现JavaScript多级联动浮动菜单是一个涉及前端基础技术、交互设计和用户体验的综合练习。通过研究和实践,开发者不仅能提升JavaScript技能,还能更好地理解网页动态效果的实现原理。
在JavaScript编程中,"js ...总的来说,实现js select多级联动涉及HTML、CSS和JavaScript的综合运用,特别是对DOM操作和事件处理的理解。理解这些知识点并灵活应用,可以创建出高效、用户体验良好的多级联动选择功能。
在JavaScript开发中,多级联动多选checkbox插件是一种常见的交互元素,用于实现层次结构数据的筛选和选择。这类插件通常用在如地区选择、类别分类等场景,用户可以通过逐级选择来过滤出需要的结果。`cascadebox-...
【Ajax多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
在提供的文件列表中,`selectArea.html`很可能是实现这个多级联动选择器的HTML页面,它包含了相关的HTML结构和可能的JavaScript绑定事件。HTML文件通常会包含若干个`<select>`元素,每个`<select>`代表一个级别的...