日期:2014-05-16  浏览次数:20420 次

【转】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>