<!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">
function CLASS_LIANDONG_YAO(array){
//数组，联动的数据源
this.array=array;
this.indexName='';
this.obj='';
//设置子SELECT
// 参数：当前onchange的SELECT ID，要设置的SELECT ID
this.subSelectChange=function(selectName1,selectName2){
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>
<br>
<br>
<br>
<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>
本文摘自:http://www.alixixi.com/Dev/HTML/jsrun/but/2008/2008082680569.html
分享到：
相关推荐
总的来说，理解和实现js多级联动多选checkbox插件涉及了JavaScript的多个核心概念，包括DOM操作、事件处理、数据结构、UI更新、性能优化以及模块化开发等。通过学习和实践，开发者可以创建出功能强大且易于使用的...
### JavaScript 多级联动 Select 实现详解 在前端开发中，多级联动 Select 是一个常见的需求，尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select，包括其核心...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，实现客户端的...通过学习和理解这些知识点，你将能够创建自己的JavaScript多级联动浮动菜单，为网站或应用增加互动性和用户体验。
JavaScript多级联动浮动菜单是一种常见的网页交互设计，用于创建具有层次结构的导航菜单。这种菜单在用户滚动页面时会保持固定在屏幕的某个位置，提供便捷的导航。在这个项目中，我们将深入探讨JavaScript如何实现...
本文将详细介绍如何使用原生JavaScript实现一个可自定义级数的多级联动下拉列表，以及如何根据提供的"demo"文件进行应用。 首先，我们需要了解多级联动的基本原理。在联动下拉列表中，当用户在一个下拉列表中选择一...
JavaScript多级联动浮动菜单 第二版，包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单，上一个版本基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。...
简单的javascript 多级联动 包含有页面数据读取
本文将深入探讨如何使用原生JavaScript实现一个不限级数的多级联动下拉列表，以"oselect.js"为例进行解析。 首先，我们需要理解联动下拉列表的基本原理。联动下拉列表是指当用户在一个下拉框中选择一个选项时，另一...
在JavaScript编程中，"js select多级联动"是一种常见的交互设计技术，主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中，当用户在第一...
JavaScript 自定义多级联动下拉菜单
本项目以“多级联动菜单”为主题，结合了HTML的`div`元素、CSS样式以及JavaScript编程，来实现动态交互效果。下面将详细介绍这个主题中的相关知识点。 一、`div`元素 `div`（division）是HTML中最基本的布局容器，...
3. Vue.js、React.js、Angular.js：这些现代前端框架提供了声明式编程和组件化开发方式，使得多级联动可以通过声明组件间的依赖关系来实现。 4. AJAX：异步JavaScript和XML，用于在不刷新整个页面的情况下获取新...
在IT行业中，尤其是在Web开发领域，"三级联动 多级联动 JavaScript"是一个常见的需求，它涉及到用户界面的交互设计和数据的动态呈现。这个概念主要应用于下拉菜单、导航栏或者选择器等组件，通常用于地区选择、部门...
### JS下拉框多级联动实现——出生日期与世界各国选择 #### 一、概述 本文档将详细介绍如何使用JavaScript实现下拉框的多级联动功能，具体应用在两个场景：一是用户选择出生日期（年、月、日）；二是用户选择国籍...
在JavaScript、HTML和JS的世界里，自定义多级联动下拉菜单是一种常见的交互设计，它通常用于提升用户体验，尤其是在处理复杂的数据层级结构时。本文将深入探讨如何利用这些技术实现自定义的select联动效果。 首先，...
在提供的文件列表中，`selectArea.html`很可能是实现这个多级联动选择器的HTML页面，它包含了相关的HTML结构和可能的JavaScript绑定事件。HTML文件通常会包含若干个`<select>`元素，每个`<select>`代表一个级别的...
jQuery多级联动插件在网页开发中经常被用于创建层级结构的数据展示，如导航菜单、地区选择、组织架构等。tntreebox是一款基于jQuery的高效、轻量级的多级联动插件，它能够帮助开发者轻松实现这种交互效果。在本教程...
总结，创建JavaScript自定义多级联动浮动菜单涉及到以下几个关键步骤： 1. 获取和操作DOM元素。 2. 添加事件监听器，响应用户交互。 3. 修改CSS样式以实现显示、隐藏和浮动效果。 4. 维护数据结构，实现菜单的联动。...
【Ajax多级联动菜单】是一种常见的前端交互设计，它允许用户在选择某个菜单项时，自动更新下一级菜单的内容，以此类推，实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景，为用户提供更加...
2. "js"文件夹：包含了实现多级联动和中文检索的JavaScript代码。这些脚本可能包含了jQuery库、jQuery.Hz2Py插件以及实现菜单逻辑的自定义函数。 3. "json"文件：可能存储了菜单的数据结构，如各级菜单项的名称和...