【转】JS&&DOM简单实现级联首先,在选择工厂的select标签中onchange()事件,来监控工厂变化的时候我来进行过
【转】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> 