`

【转】JS&&DOM简单实现级联

阅读更多
首先,在选择工厂的<select>标签中onchange()事件,来监控工厂变化的时候我来进行过滤。
<select name="WERKS"  onchange="changeSelect(this)">
this传的是当前的value。还需要一点就是你要设定要改变标签的name,这里我设成

<select name = "dest"></>
接下来,就开始js了这个也very easy。我用的是html的DOM来实现的,(扯句闲话,新手其实真该看看DOM这样对你理解页面的节点结构很有帮助,对你写js也非常有用)。
实现代码如下:
<script type="javascript/text"> 
function changeSelect(werk){ 
//werk是你传进来的参数,这里也就是<select>标签中的this这个值已经在上面解释过了 
var rowObj = werk.parentNode;//首先得到你点击的行对象,也就是你在哪行点击的。 
var trArr = rowObj.parentNode.children;//得到所有行组成一个数组 
var rowNo;//存放点击的行的行号 
for(var trNo = 0;trNo < trArr.length;trNo++){//循环找出你点的是哪行 
   if(trObj == trObj.parentNode.children[trNo]){//判断是否是点击的那一行 
      rowNo = parseInt(trNo-1);//因为里边有表头信息所以要-1 
   } 
} 
//至此我们知道对哪一行进行操作了,剩下就过滤吧··· 
var optArr = document.getElementByName("dest"); 
//dest就是要改变的select的name 
// 当然这是一个数组,因为要循环的话可能有多<select name ="dest"> 
opt = optArr[rowNo];//获得当前的行对象 
var opt.length = 1;//每次都给它清空等于1是因为默认值是"请选择"必须有一条呀 
<s:iterator value="#request.T001l"> 
//T001l这个表就是反冲库存表,表名不是我取的,SAP就叫这名字。 
if(${id.werk} == werk.value){ 
//反冲库存地点是复合主键,有个ID对象里边存两个值,如果工厂主键和反冲库存主键的 
//werk相等那么就放在opt对象中 ,werk和lgort这两个组成的复合主键 
var optObj = document.CreateElement("OPTION");//创建一个OPTION对象 
//关于option对象个人理解:存放value和Index的对象。具体解释查查DOM吧 
optObj.value = ('${id.lgort};${id.werk}');//option的value=这个值 
optObj.text = ($.trim('lgobe'));//$.trim()方法是jQuery的就是去空格的。 
//text就是我们option中的label现实给用户选择的。 
opt.add(optObj);//查到相等的就直接放在opt数组中 
} 
</s:iterator> 
分享到:
评论

相关推荐

    JS实现树型级联选择

    在JavaScript(JS)中实现树型级联选择是一种常见的需求,尤其在构建用户界面时,如文件管理系统、组织架构展示或者导航菜单等。这个过程涉及到数据的递归处理、事件监听以及DOM操作。下面我们将详细探讨如何利用...

    jQuery实现级联地区选择

    总的来说,这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器,这在网页开发中非常实用,尤其是在需要用户输入地区信息的场景下。理解并掌握这种实现方式对于提升Web开发...

    注册验证及javascript实现级联菜单

    实现级联菜单的一种常见方法是使用JavaScript库,比如jQuery,它提供了丰富的API简化DOM操作。然而,现代JavaScript(ES6及以上版本)提供了更简洁的语法,如模板字符串、箭头函数和事件处理,可以直接实现相同功能...

    Ajax 实现级联菜单

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读和分析代码,你可以深入了解如何结合JavaScript、DOM操作和服务器通信来实现这种常见的前端功能。

    js加html编写的级联菜单

    总结,js和html编写的级联菜单结合了前端和后端的技术,通过JavaScript实现了动态交互和数据获取,HTML提供了结构基础,而数据库则为菜单提供了数据源。这种技术组合使得网页可以提供丰富的交互性和实时性,极大地...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    JavaScript解析XML实现多级级联下拉列表

    总结来说,实现JavaScript解析XML实现多级级联下拉列表的关键在于理解XML的结构、使用DOMParser解析XML,以及处理级联下拉列表的事件和逻辑。通过这些技术,我们可以创建出高效且易于维护的级联选择功能,提升用户的...

    JavaScript级联下拉特效制作

    总的来说,制作JavaScript级联下拉特效是一个很好的实践项目,它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程,你可以提升你的JavaScript编程技巧,并为你的网页增添更丰富的交互性...

    cascaderjs级联选择器

    在JavaScript中,我们可以使用原生DOM操作、jQuery库或者其他前端框架(如React、Vue或Angular)来实现级联选择器。这里我们以原生JS为例,简要介绍其基本实现步骤: 1. **创建HTML结构**:首先,我们需要创建一个...

    级联js代码详情学习

    在JavaScript编程中,“级联”(Cascading)一词主要与CSS(层叠样式表)相关,但在JS(JavaScript)中,它可能指的是不同概念的级联操作,如对象属性的级联访问或者事件的级联触发。下面将详细讨论JavaScript中的...

    js下拉级联例子

    总结来说,"js下拉级联例子"是一个关于前端交互设计的示例,通过JavaScript实现了下拉菜单之间的数据联动。这种设计提高了用户在多选项选择时的效率,同时也展示了JavaScript在动态更新DOM和处理用户输入方面的强大...

    js+jsp标签实现页面级联菜单

    本话题主要探讨如何使用JavaScript(js)结合JavaServer Pages(jsp)标签来实现这样的功能。JavaScript是客户端脚本语言,负责处理用户交互,而jsp标签则是在服务器端执行,生成动态HTML内容。 首先,我们需要理解...

    用AJAX实现的级联菜单

    AJAX(Asynchronous JavaScript and XML)技术可以有效地实现级联菜单的动态加载和交互,无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页的...

    js级联菜单示例

    jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理以及动画效果,使得创建级联菜单变得更为便捷。 首先,让我们理解级联菜单的基本概念。级联菜单由一系列嵌套的下拉列表组成,当用户选择一个父级选项...

    javaScript实现级联效果的两种写法

    下面将详细介绍两种常见的JavaScript实现级联效果的方法。 方法一:HTML与JavaScript内联事件 1. HTML结构:首先,我们需要创建一个包含多个`&lt;select&gt;`元素的结构,每个`&lt;select&gt;`代表一个级别的选项。 ```html ...

    jquery简单实现级联下拉列表

    在给定的代码片段中,我们看到一个简单的级联下拉列表实现。页面中有两个下拉列表,`#s1` 和 `#s2`。`#s1` 的改变会触发 `change()` 函数,该函数根据 `#s1` 的选中值动态修改 `#s2` 的内容。 #### 代码解析 1. **...

    javascript中的级联插件

    在JavaScript中实现级联插件的关键在于数据结构的设计和事件监听。通常,我们会使用JSON(JavaScript Object Notation)来存储多级数据,因为JSON格式清晰、易于读写,适合表示层次结构。例如,以下是一个简单的两级...

    Html dom中的select, option_ 级联下拉列表

    文中练习7的示例代码演示了如何使用JavaScript和HTML来实现级联下拉列表。级联下拉列表涉及到监听某个下拉列表的变化事件,然后根据选择的值来动态更改另一个下拉列表的选项。这通常需要事先准备相关的数据源,然后...

    javascript 城市级联

    JavaScript 城市级联是一种常见的前端交互功能,用于在两个或多个下拉列表之间实现联动效果,通常是省份和城市,用户选择一个省份后,城市下拉列表会动态更新为对应省份的城市。这种功能广泛应用于地址填写、物流...

    js 级联选择地区

    在JavaScript和jQuery的世界里,级联选择是一种常见的交互设计,...总之,"js 级联选择地区"是一种实用的前端交互设计,结合JavaScript和jQuery可以轻松实现。理解其工作原理和实现方法对于提升网页交互体验至关重要。

Global site tag (gtag.js) - Google Analytics