实例名称

JS代码实现手动调整的列表框

实例描述

列表框用来显示一组相似的信息，本例学习如何动态实现列表框内容的添加、删除、上移和下移。

实例代码

script language="javascript"function movelistItem，listObj //列表项添加的方法 var i = 0; != "" //如果列表项不为空 var newOp = new Option; //创建一个列表项 = ; //设置列表项的值 = ; //设置列表项的文本 = newOp; //添加新项到列表框中 = "";

function removelistObj //列表框的删除方法 forvar i=0; ; i++ != "" = ""; //清除选定项的值 = ""; //清除选定项的文本 delAfterlistObj; //删除后的排序处理 function delAfteralistObj forvar i = 0; i ; i++ == "" //值为空的会被清除forvar j = i; j - 1; j++ = + 1.value; //重新排列顺序 = + 1.text; var ln = i; break; ifln -= 1; delAfteralistObj; function MoveuplistObj //将列表项往上移动 forvar i = 0; i ; i++ //遍历列表项 if != "" != var tmpval1 = ; //获取当前项的值 var tmpval12 = ; //获取当前项的文本 = - 1.value; //获取上一项的值 = - 1.text //获取上一项的文本 = tmpval1; //实现上下值的互换 = tmpval12; //实现上下文本的互换 function MovedownlistObj //将列表项往下移动 forvar i = 0; i ; i++ if != "" +1 != var tmpval1 = ; //获取当前项的值 var tmpval12 = ; //获取当前项的文本 = ; //获取下一项的值 = //获取下一项的文本 = tmpval1; //实现上下值的互换 = tmpval12; //实现上下文本的互换 /script

运行效果

难点剖析

本例的重点是对列表框的遍历。当添加新项到列表框时，通过创建新。ption元素的方式添加项。当删除选项时，先设置选项的值为空，然后以遍历的方式将值为空的项删除。上移和下移的方法都是通过遍历列表框，然后进行上下选项值的互换。

源码下载