`
javer
  • 浏览: 68873 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

联动选择菜单

阅读更多
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>联动选择菜单</TITLE>
</HEAD>
<BODY >

<script language="JavaScript">
<!--

var subcat = new Array();
subcat[0] = new Array('10','1','=1')
subcat[1] = new Array('10','2','=2')
subcat[2] = new Array('10','3','=3')
subcat[3] = new Array('10','4','=4')
subcat[4] = new Array('10','5','=5')
subcat[5] = new Array('10','6','=6')
subcat[6] = new Array('10','7','=7')
subcat[7] = new Array('10','8','=8')
subcat[8] = new Array('10','9','=9')
subcat[9] = new Array('10','10','=10')
subcat[10] = new Array('20','11','=11')
subcat[11] = new Array('20','12','=12')
subcat[12] = new Array('20','13','=13')
subcat[13] = new Array('20','14','=14')
subcat[14] = new Array('20','15','=15')
subcat[15] = new Array('20','16','=16')
subcat[16] = new Array('20','17','=17')
subcat[17] = new Array('20','18','=18')
subcat[18] = new Array('20','19','=19')
subcat[19] = new Array('20','20','=20')

function changeselect1(locationid)
{
	document.form1.s2.length = 0;
	document.form1.s2.options[0] = new Option('==请选择==','');
	for (i=0; i<subcat.length; i++)
	{
		if (subcat[i][0] == locationid)
		{document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1], subcat[i][2]);}
	}
}
//-->
</script>

<form name="form1">

二级联动:

<select name="s1" onChange="changeselect1(this.value)">
<option>==请选择==</option>
<option value="10">1-10</option>
<option value="20">11-20</option>
</select>

<select name="s2" onChange="alert(this.value)"> 
<option>==请选择==</option>
</select>

</form>

<!-- 二级联动 Over -->

<!-- 三级联动 Start -->

<script language="JavaScript">
<!--

var subval = new Array();
subval[0] = new Array('10','单数','1','=1')
subval[1] = new Array('10','双数','2','=2')
subval[2] = new Array('10','单数','3','=3')
subval[3] = new Array('10','双数','4','=4')
subval[4] = new Array('10','单数','5','=5')
subval[5] = new Array('10','双数','6','=6')
subval[6] = new Array('10','单数','7','=7')
subval[7] = new Array('10','双数','8','=8')
subval[8] = new Array('10','单数','9','=9')
subval[9] = new Array('10','双数','10','=10')
subval[10] = new Array('20','单数','11','=11')
subval[11] = new Array('20','双数','12','=12')
subval[12] = new Array('20','单数','13','=13')
subval[13] = new Array('20','双数','14','=14')
subval[14] = new Array('20','单数','15','=15')
subval[15] = new Array('20','双数','16','=16')
subval[16] = new Array('20','单数','17','=17')
subval[17] = new Array('20','双数','18','=18')
subval[18] = new Array('20','单数','19','=19')
subval[19] = new Array('20','双数','20','=20')

function changeselect2()
{
	document.form2.s2.length = 0;
	document.form2.s2.options[0] = new Option('==请选择==','');
	document.form2.s2.options[1] = new Option('选择单数','单数');
	document.form2.s2.options[2] = new Option('选择双数','双数');
	document.form2.s3.length = 0;
	document.form2.s3.options[0] = new Option('==请选择==','');
}

function changeselect3(sub1,sub2)
{
	document.form2.s3.length = 0;
	document.form2.s3.options[0] = new Option('==请选择==','');
	for (i=0; i<subval.length; i++)
	{
		if ((subval[i][0] == sub1) & (subval[i][1] == sub2))
		{document.form2.s3.options[document.form2.s3.length] = new Option(subval[i][2], subval[i][3]);}
	}
}
//-->
</script>

<form name="form2">

三级联动:

<select name="s1" onChange="changeselect2()">
<option>==请选择==</option>
<option value="10">1-10</option>
<option value="20">11-20</option>
</select>

<select name="s2" onChange="changeselect3(document.form2.s1.value,this.value)"> 
<option>==请选择==</option>
</select>

<select name="s3" onChange="alert(this.value)"> 
<option>==请选择==</option>
</select>

</form>

<!-- 三级联动 Over -->

</BODY></HTML>

 

分享到:
评论

相关推荐

    asp+js 三级联动选择菜单

    在这个项目中,数据库存储了联动菜单的数据,可能是各个级别的分类信息。当用户在ASP后台进行选择时,这些信息会被用来动态生成JavaScript可以处理的JSON或XML数据,供前端展示。 5. **实现步骤**: - **服务器端...

    下拉框联动选择菜单代码.zip

    在IT行业中,下拉框联动选择菜单是一种常见的交互设计,常用于网页表单或应用程序,让用户在多个相关选项间进行筛选和选择。这种技术利用JavaScript(JS)来实现动态效果,提升用户体验。以下是对"下拉框联动选择...

    angularJS二级联动选择菜单

    在本文中,我们将深入探讨如何使用AngularJS实现二级联动选择菜单。AngularJS,作为一个强大的前端JavaScript框架,提供了丰富的功能和工具来构建动态、交互式的Web应用程序。二级联动选择菜单是常见的用户界面元素...

    jQuery三级地区联动选择菜单jquery-1.9.1.js制作,省市区三级联动选择菜单,适合手机WAP网站使用.zip

    这种情况下,一个高效且用户友好的三级联动选择菜单就显得尤为重要。"jQuery三级地区联动选择菜单jquery-1.9.1.js制作"就是解决此类问题的一个优秀方案。这个项目使用了著名的JavaScript库jQuery,版本为1.9.1,来...

    js 特效 html 特效 联动选择菜单

    js 特效 html 特效 联动选择菜单 js 特效 html 特效 联动选择菜单

    jQuery三级地区联动选择菜单.zip

    这种联动菜单能够为用户在选择地址时提供方便,使得信息输入更为流畅。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本项目中,jQuery 1.9.1被用来处理地区...

    PCASClass省市区三级联动选择菜单.zip

    在网页开发中,省市区三级联动选择菜单是一个常见的功能,特别是在需要用户填写详细地址的场景下。`PCASClass` 是一个专为此目的设计的JavaScript封装类,它提供了高效、兼容性和易用性的解决方案。本篇文章将深入...

    ASP三级联动下拉菜单

    ASP三级联动下拉菜单 ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单,通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中,例如电商平台、在线论坛等。 在这个例子中...

    jQuery三级地区联动选择菜单特效代码

    jQuery三级地区联动选择菜单jquery-1.9.1.js制作,省市区三级联动选择菜单,适合手机WAP网站使用。

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...

    下拉框联动选择菜单

    "下拉框联动选择菜单"是一种常见的前端交互设计,它在网页中被广泛用于实现级联选择的效果。这种设计通常涉及到多个下拉框,当用户在一个下拉框中选择一个选项时,它会影响到下一个或多个关联的下拉框,显示与前一个...

    联动菜单大全(含ajax,无限级联动菜单)

    联动菜单在Web开发中是一种常见的交互设计,它通常用于实现数据层级关系的展现和操作,如省份-城市-区县的三级联动选择。本资源包“联动菜单大全”包含了多种类型的联动菜单实现,包括与数据库交互的、使用AJAX技术...

    四级联动菜单,联动菜单

    联动菜单,四级联动菜单,联动下拉菜单,简单易懂,可自定义任何区域或者行业

    JS城市联动菜单.rar

    在网页设计中,城市联动菜单是一种常见的交互元素,它能够为用户提供更加便捷的地域选择体验。JS(JavaScript)作为网页动态效果的主要驱动力,是实现这种功能的理想选择。本文将深入探讨JS城市联动菜单的工作原理、...

    java联动菜单实例详解

    在Java编程中,联动菜单(通常称为级联菜单或下拉树菜单)是一种常见的用户界面元素,它允许用户从多个相关选项中进行选择,这些选项按照层次结构组织。本篇文章将深入探讨Java实现联动菜单的概念、设计以及相关技术...

    melist多级联动下拉菜单可中文检索.rar

    在传统的下拉菜单中,用户只能在一个单一的层次上选择,而联动菜单则提供了更丰富的选择路径。这种菜单结构通常由父级和子级菜单项组成,当用户选择一个父级项时,相应的子级菜单会显示出来,形成一个联动效果。 ...

    element-ui省市县三级联动菜单代码.zip

    在"element-ui省市县三级联动菜单代码.zip"这个压缩包中,我们可以推测其内含的示例是使用 Element UI 实现的中国省市县三级联动选择菜单。这种菜单在很多需要用户输入地址信息的场景下非常常见,例如在线购物、地图...

    多款多级联动下拉菜单打包!必有一款适合你!

    6. **MultilevelSelect-5265.rar**:"MultilevelSelect"直译为多级选择,这可能是一个专门的多级联动下拉菜单插件或库,5265可能是项目ID或版本号。 7. **ajax.zip**:这个可能是一个基本的AJAX实现的下拉菜单,ZIP...

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...

Global site tag (gtag.js) - Google Analytics