二级连动菜单
源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
//准备一级菜单数据
var delType=new Array();
delType[0]=new Array();
delType[0].push("一级选项A");
delType[0].push("A1");
delType[1]=new Array();
delType[1].push("一级选项B");
delType[1].push("B1");
//准备二级菜单数据
var delReas=new Array();
delReas[0]=new Array();
delReas[0].push("二级选项A");
delReas[0].push("A2");
delReas[0].push("A1");
delReas[1]=new Array();
delReas[1].push("二级选项B");
delReas[1].push("B2");
delReas[1].push("A1");
delReas[2]=new Array();
delReas[2].push("二级选项C");
delReas[2].push("C2");
delReas[2].push("B1");
</script>
</HEAD>
<BODY>
<select id="firstSel" onchange="selSecondSel(this)">
</select>
<select id="secondSel">
</select>
<script language="javascript">
//初始化一级菜单
var sel_Obj_f=document.getElementById("firstSel");
for(var i=0;i<delType.length;i++){
var oOption = document.createElement("OPTION");
sel_Obj_f.options.add(oOption);
oOption.innerText = delType[i][0];
oOption.value = delType[i][1];
if(i==0){
oOption.selected = "true";
}
}
//初始化二级菜单
selSecondSel(sel_Obj_f);
function selSecondSel(firstSel){
//取出一级菜单选择的是哪一个
var sel_Index = firstSel.selectedIndex;
var temp=firstSel.options[sel_Index].value;
//设置二级菜单
var sel_Obj_s=document.getElementById("secondSel");
sel_Obj_s.innerHTML="";
//alert(delReas.length);
for(var i=0;i<delReas.length;i++){
if(delReas[i][2]==temp){
var oOption = document.createElement("OPTION");
sel_Obj_s.options.add(oOption);
oOption.innerText = delReas[i][0];;
oOption.value = delReas[i][1];
}
}
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
在给定的文件中，"JS二级连动菜单.html"和"js2级连动.html"很可能是包含实现这一功能的HTML和JavaScript代码示例。通过查看这些文件，我们可以看到实际的代码实现，包括如何组织数据、如何监听事件以及如何操作DOM...
本项目"dwj jsp三级连动菜单"是结合了DWR和JSP技术实现的一种交互式的三级菜单。在网页设计中，联动菜单意味着当用户选择某个菜单项时，下一级菜单会根据所选项动态加载，这种效果可以递归到多级菜单，提供良好的...
本主题聚焦于创建一个具有3级连动效果的CSS菜单，这将帮助用户更方便地浏览多层级的内容。下面我们将深入探讨如何实现这样的功能。 首先，我们需要理解CSS菜单的基本结构。一个简单的菜单通常由HTML的`<ul>`和`<li>...
在"二级连动无刷新的实现"中，我们主要关注如何在用户做出选择后，不通过页面整体刷新来更新第二个下拉菜单的内容，而是通过异步（通常为AJAX）请求更新数据。 1. **基础概念** - **联动**：联动指的是两个或多个...
在网页开发中，省市区连动菜单是一种常见的交互设计，用于让用户方便地选择地理位置信息。jQuery作为一款轻量级的JavaScript库，提供了丰富的API和插件来实现这种功能。本项目名为“jquery 省市区连动菜单”，是一个...
本例将重点讲解如何利用Ajax实现一个简单的二级联动效果，即在一个下拉菜单的选择触发后，自动更新另一个下拉菜单的内容，而无需刷新整个页面。此效果常见于如地区选择、分类筛选等场景。 首先，我们需要了解Ajax的...
在Excel中，二级联动是一种常见的数据验证技巧，用于创建相互关联的数据下拉列表。这种功能在处理大型数据集时特别有用，例如在区域与城市、类别与子类别等关系中，选择一级数据后，二级数据会自动筛选出相应的内容...
#### 一、省市二级联动下拉框原理与实现方式 **省市二级联动下拉框**是一种常见的用户界面组件，用于在Web应用中展示省市区等多级分类数据，并允许用户逐级选择。这种下拉框通常有两个或多个下拉列表，用户选择一个...
【Ajax实现三级联动】是指在Web开发中，利用Ajax技术实现多级下拉菜单之间的联动效果，例如在省、市、区的选择中，当用户在一级下拉菜单（如省份）中选择一个选项时，二级下拉菜单（如城市）会自动更新与之相关的...
在前端开发中，JS多级连动菜单是一种常见的交互设计模式，它允许用户在一个下拉列表中做出选择后，根据该选择动态更新另一个或多个下拉列表的内容。这种设计通常用于表单中，用以简化数据选择过程，提高用户体验。接...
当用户在一级菜单（省份）中选择某个省份时，二级菜单（城市）会更新为该省份下的城市；同理，当用户选择城市后，三级菜单（区县）会展示该城市下的区县信息。 阿里巴巴的这套源码，是针对全国城市数据的三级联动...
例如，第一个下拉菜单选择省份，第二个下拉菜单会根据所选省份自动更新为该省份的城市，第三个下拉菜单则显示选定城市下的区县。这样的设计极大地减少了用户的输入工作量，提高了用户体验。 在ASP中，实现这一功能...
这里我们关注的是如何利用AJAX实现三级联动的效果，即在一个下拉菜单中选择一项时，相关的第二级和第三级下拉菜单会根据选择自动更新其内容。这在如地区选择、产品分类等场景中非常常见。 首先，我们需要理解AJAX的...
当用户在第一级选择一个选项时，第二级的选择项会根据第一级的选值动态更新；同理，当第二级选定后，第三级的选项也会相应改变。这种联动效果常用于地区选择、产品分类等场景，能够提供灵活且直观的用户体验。 在...
当用户在一级（省）选择后，二级（市）的数据应根据所选省动态更新；同理，选中市后，三级（区）的数据也应随之变化。这需要通过监听Spinner的选择事件，动态加载并更新下级数据列表来实现。 3. **实现步骤** - **...
用户在一级菜单中选择一项后，二级菜单会根据一级选择动态更新其选项，以此类推。这种设计能有效节省屏幕空间，提高用户操作效率。 在IT行业中，实现连动下拉主要涉及前端开发，特别是JavaScript、HTML和CSS这三门...