最简单的实现动态无刷新级联菜单JS&&DOM

    最开始进入项目的时候，装了环境装半天，真实茫然。一脸的颓废，好几天没怎么睡觉了。心里急的找不到东南西北，开始来时，被告知都是有很多实习生。但是当我到的时候，他们谈的做的都让我很是郁闷。不懂啊···还好下午曹哥跟我说了些宽慰的话。被告知他们都是工作好几年了，这下我才有些许的安心，当然我知道我现在差好多，心里真的很急啊。情感生活就不说了，更是郁闷。
    进入正题：leader说让我帮他弄一下级联，菜单中工厂里边有个工厂编号主键是werk，反冲库存地点里边是复合主键(lgort,werk)显示的是描述。复合主键中一个就是工厂的主键werk。当用户选择工厂时候，反冲库存地点就跟着变化（复合主键中的一个工厂的主键）。其实这看起来很简单。当时我就像既然是级联，用ajax好像是最流行的吧，但是好像我不太会哦~~~无奈之下，我只能选择js。当然他们是再进入页面之前把这两个表都初始化好了，接下来就剩下过滤了。具体实现方法如下：
    首先，在选择工厂的<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>
//至此也就结束了我们简单的级联.比较简单的级联下一篇文章将介绍jQuery时间级联相当
//简单
</script>
待续..........

评论

1 楼 abs44544 2010-08-20  

关注下一篇。

情感方面没有什么好郁闷的，这个时候不要抱怨，要有信心，要坚持，谁让咱们是男人呢。