JS级联式下拉列表
<html>
<head>
</head>
<body>
<script language="JavaScript">
<!--
//第一维:第一个下拉列表的值
//第二维:表示下拉列表中看到的字符串
//第三维:表示下拉列表中的值
var subcat = new Array();
//如果大类的值是动态的,则可以通过数据库中取出作如下设置
//subcat[<%=count%>] = new Array('<%=trim(rs("leemaid"))%>','<%=rs("leemaconte nt")%>','<%=rs("leemacontent")%>');
subcat[0] = new Array('1','电视机','=1')
subcat[1] = new Array('1','电风扇','=2')
subcat[2] = new Array('1','电饭煲','=3')
subcat[3] = new Array('1','电炒锅','=4')
subcat[4] = new Array('1','电灯','=5')
subcat[5] = new Array('1','电脑','=6')
subcat[6] = new Array('1','电冰箱','=7')
subcat[7] = new Array('1','洗衣机','=8')
subcat[8] = new Array('1','微波炉','=9')
subcat[9] = new Array('1','VCD影碟机','=1')
subcat[10] = new Array('2','二极管','=11')
subcat[11] = new Array('2','三极管','=12')
subcat[12] = new Array('2','CMOS集成块','=13')
subcat[13] = new Array('2','电阻','=14')
subcat[14] = new Array('2','电容','=15')
subcat[15] = new Array('2','整流二极管','=16')
subcat[16] = new Array('2','整流桥','=17')
subcat[17] = new Array('2','可控硅','=18')
subcat[18] = new Array('2','电子枪','=19')
subcat[19] = new Array('2','光敏二极管','=2')
function changeselect1(selectValue)
{
document.form1.s2.length = 0;//初始化下拉列表 清空下拉数据
//document.form1.s2.options[0] = new Option('请选择二级小类','');//给第一个值
for (i=0; i<subcat.length; i++)//legth=2
{
if (subcat[i][0] == selectValue)//[0] [1] 第一列 第二列
{
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="1">家用电器</option>
<option value="2">电子元器件</option>
</select>
<select name="s2" onChange="alert(this.value)">
<option>请选择二级小类</option>
</select>
</form>
</body>
</html>
分享到：
相关推荐
在javaScript中使下拉列表实现级联更新
在下拉列表级联中，通常有一个主下拉列表，用户选择一个选项后，第二个相关的下拉列表会根据所选选项自动填充相关数据。例如，选择一个国家后，接着的城市下拉列表会显示相应国家的城市列表。这种级联效果可以通过...
在这个“ajax+struts2.0+jsp下拉列表级联”的示例中，我们将探讨如何利用这三个技术实现这种功能。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...
### 级联下拉列表工具类：JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式，特别是在处理多层级数据时，它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...
在Web开发中，级联下拉列表是一种常见的交互设计，用户选择一个选项后，另一个相关的下拉列表会根据前者的选值动态更新。这个过程通常涉及到前端与后端的交互，利用JavaScript库如jQuery和服务器端框架如Spring MVC...
在JavaScript编程中，实现无限级联下拉列表是一项常见的需求，尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择，每一级的选择会影响到下一级的显示内容。下面我们将...
在网页设计和开发中，`input`级联下拉列表是一种常见的交互元素，它允许用户在选择一个选项后，根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据，如国家/地区、省份/...
在这个场景中，"省市级联表格"并不是指传统的下拉列表级联，而是通过表格形式来展现省份和城市之间的层级结构。下面我们将深入探讨这个主题。 首先，我们要理解"非动态省市级联表单"的概念。这通常意味着表单中的...
3. **JavaScript/jQuery交互**：在前端，使用JavaScript或者jQuery监听第一个下拉列表的`onchange`事件。当用户选择一个省份时，触发一个AJAX请求，将所选省份ID发送到服务器。 4. **服务器端处理**：JSP接收AJAX...
JavaScript动态级联下拉列表框是一种常见的前端交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用，能够提高用户体验，减少不必...
级联下拉列表是一种常见的前端交互设计，常用于如地区选择、分类筛选等场景，它使得用户能够通过一个下拉菜单的选择触发另一个下拉菜单的内容更新。在这个案例中，我们只用五句代码就能实现这样的功能，这充分体现了...
然而，在实际项目中，可能需要处理更复杂的逻辑和更大的数据量，此时可以考虑使用更高级的前端框架如React或Vue.js，它们提供了更强大的状态管理和组件化开发能力，能够更好地支持大规模的级联下拉列表和其他复杂的...
网页表单级联下拉列表自动填写方法是指在网页表单中，多个下拉列表框之间存在关联关系，选择前一个下拉列表框的选项后，后一个下拉列表框才会出现相关的选项，这样可以实现自动填写省、市、县三级下拉列表框的功能。...
在本示例中，"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计，用户在一个下拉列表中做出选择后，第二个或更多的下拉列表会根据...
在网页设计中，"select级联下拉列表"是一种常见的交互元素，用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript（JS）、HTML5和jQuery库来实现，使得用户能够在多个下拉菜单之间进行联动选择，...
在网页开发中，级联下拉列表是一种常见的交互设计，常用于实现省市区选择、类别筛选等场景。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，同时也提供了丰富的插件来扩展功能。在这个...
**jQuery实现的多级级联下拉列表** 在网页开发中，级联下拉列表是一种常见的交互元素，它允许用户从一系列相关选项中选择，这些选项根据先前的选择动态更新。在本项目中，我们利用jQuery库来实现这种功能，同时结合...
下面将详细介绍如何使用JavaScript实现全国省市的二级级联下拉菜单。 首先，我们需要一个HTML结构来承载我们的菜单。在这个例子中，我们有两个`<select>`元素，分别代表省份和城市。省份的选项会触发城市选项的更新...
javascript 级联下拉列表 正则表达式
JavaScript 级联下拉列表是一种常见的前端交互设计，它允许用户在选择一个选项后，根据该选项的值动态更新第二个或更多的下拉列表。这种功能在数据层级关系明确、需要用户逐步选择的情况下非常有用，比如省份-城市-...