`
lihong11
  • 浏览: 456239 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

js下拉级联例子

阅读更多
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>下拉级联例子</title>
<script type="text/javascript">
//存放着所属关系:这里文件名0和文件名2属于部门二的,fileid作为option中value属性的值
var arr = new Array(); 	
  arr[0]=new Array("文件名0","fileid","orgid2");
  arr[1]=new Array("文件名1","fileid1","orgid1");
  arr[2]=new Array("文件名2","fileid2","orgid2");
 
 function selectOrg(index,orgid){
	var obj=document.getElementById('sfile');
    var i;
    obj.options.length=0;	//清除原来的下拉项
    for (i=0;i < arr.length; i++){ 
      if (arr[i][2] == orgid&&arr[i][2]!=null){
//	创建新的下拉项,参数对应为("文本"、"值")如("文件名0"、"fileid")
        obj.options.add(new Option(arr[i][0],arr[i][1])); 		
      }       
    }
    if(obj.options.length==0){
      obj.options.add(new Option("请选择","0")); 	//未选择时
    }
  }

</script>
</head>
<body >
<p>某部门下有某些文件:如果是用struts1标签<html:select>,用styleId属性相当于id</p>
<hr/>
<table>
	<tr>
	  <td>
	   <select id="fileCatalogId" value="" onchange="selectOrg(this.selectedIndex,this.options[this.selectedIndex].value)"  >
			<option value="0">请选择</option>
			<option value="orgid1">部门一</option>
			<option value="orgid2">部门二</option>
	    </select>
	  </td>
	  <td>
		<select id="sfile"  value="">
		  <option value="0">请选择</option>
		</select>
	  </td>
	</tr>
</table>
</body>

 

0
2
分享到:
评论

相关推荐

    AJAX3级级联下拉例子

    这个"AJAX3级级联下拉例子"是一个典型的前端交互应用,常见于动态填写表单,如地区选择,省市区级联填充。在这个例子中,用户选择一个选项时,下一个下拉框会根据前一个选项的值动态加载相关的数据,从而提供更精确...

    jQuery 级联下拉列表

    5. **自定义配置**:虽然描述中的例子只有三个级联下拉列表,但实际应用中可能会有更多。`related`插件可能支持传入更多参数来自定义级联关系,比如设置默认值、错误处理、数据加载方式等。 在实际项目中,可能还...

    js级联菜单实现全国省市下拉菜单

    下面将详细介绍如何使用JavaScript实现全国省市的二级级联下拉菜单。 首先,我们需要一个HTML结构来承载我们的菜单。在这个例子中,我们有两个`&lt;select&gt;`元素,分别代表省份和城市。省份的选项会触发城市选项的更新...

    级联下拉例子

    在“级联下拉例子”这个压缩包中,我们可能找到一个名为“cascade-select”的示例,这很可能是一个实现级联下拉功能的代码实例或者一个演示项目。下面我们将深入探讨级联下拉框的相关知识点: 1. HTML 结构:级联...

    4个asp.net省份城市级联例子

    本篇文章将围绕"4个asp.net省份城市级联例子"展开,分别探讨使用JavaScript、HTML、ASP.NET的DropDownList实现的方法。 首先,我们来看使用JavaScript实现省份城市级联的例子。JavaScript是一种客户端脚本语言,...

    级联下拉列表

    级联下拉列表是一种常见的前端交互设计,常用于如地区选择、分类筛选等场景,它使得用户能够通过一个下拉菜单的选择触发另一个下拉菜单的内容更新。在这个案例中,我们只用五句代码就能实现这样的功能,这充分体现了...

    级联下拉列表例子(ajax和jquery)&prototype1;.7&jquery;_jar

    虽然在这个例子中主要使用的是jQuery,但Prototype的提及可能意味着示例也可能包含了如何使用Prototype实现级联下拉的示例或者作为备选方案。 至于"jquery.jar",这看起来有些不同寻常,因为jQuery通常是以.js文件...

    Struts2+Hibernate写的下拉菜单级联两级分类

    第一个下拉菜单的选项应由顶级分类填充,第二个下拉菜单的选项则依赖于第一个下拉菜单的选择,通过JavaScript或jQuery监听第一个下拉菜单的change事件,动态更新第二个下拉菜单的内容。 5. **Ajax交互**:为了实现...

    关于级联的一个小例子

    本示例主要探讨了如何在JavaScript和jQuery中利用XML文件实现级联效果。XML(可扩展标记语言)是一种用于存储和传输结构化数据的标准格式,而jQuery则是一个强大的JavaScript库,它简化了DOM操作、事件处理以及Ajax...

    JavaScript小案例:级联列表.html

    4. 两种方法实现对应省市的下拉操作 一、什么是级联? 1.级联还指用来设计一对多关系。举个例子:一个表存放学生的信息:表A(姓名,性别,年龄),姓名为主键。还有一张表存放学生的班级信息:表B(姓名,班级)。...

    javascript 级联菜单

    JavaScript级联菜单是一种常见的网页交互元素,用于呈现层次结构的数据,如导航菜单、下拉选项等。这种菜单在用户界面上提供了高效的导航,允许用户通过展开和折叠子菜单来探索多级内容。在这个主题中,我们将深入...

    jQuery实现的多级级联下拉列表

    本教程将深入探讨如何使用jQuery这一强大的JavaScript库来实现多级级联下拉列表。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    超简单的级联下拉框例子

    本示例“超简单的级联下拉框例子”采用了一种独特且简洁的实现方法,旨在减少代码量,提高可读性,并避免使用数组。数组通常用于存储级联选项的数据,但在这个例子中,开发者可能采用了另一种数据结构或者直接在HTML...

    一个用jquery写的级联完整例子

    例如,在一个国家-省份-城市的级联下拉中,选择国家后,省份列表会更新为该国的省份,接着选择省份后,城市列表会显示相应的城市。 在这个例子中,主要的步骤可能包括: 1. **HTML结构**:创建包含多个级联下拉框...

    AJAX_Servlet级联下拉列表

    在Web开发中,AJAX(Asynchronous JavaScript and XML)与Servlet技术常常被用来实现动态、交互式的用户界面,其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后,根据所选选项动态加载并...

    js省区级联

    在这个“js省区级联”的实例中,我们主要关注的是JavaScript技术在实现这种功能上的应用。 JavaScript是一种广泛使用的客户端脚本语言,它允许我们在用户的浏览器上动态地修改网页内容。在省区级联中,JavaScript的...

    dwr例子演示级联菜单

    这个例子“dwr例子演示级联菜单”旨在帮助我们理解如何使用DWR来创建动态的、交互式的级联下拉菜单。级联菜单常用于Web应用程序中,例如在选择国家时自动更新相应的省份列表。 首先,让我们了解一下DWR的基本工作...

    js select下拉联动 更具级联性!

    这个级联下拉联动的例子展示了如何利用JavaScript和jQuery处理动态数据,以及如何根据用户的选择更新界面。它适用于需要根据用户选择过滤信息的场景,如产品配置、地理位置选择等。通过这种方式,用户可以逐步细化...

    级联下拉框效果 jquery

    实现级联下拉框效果,我们通常需要两个或多个`&lt;select&gt;`元素,并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时,触发事件处理函数,根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...

Global site tag (gtag.js) - Google Analytics