有人问说：如何做出在网页中将某个ListBox内被选取的资料移到另一个ListBox里？

这种功能好像蛮常在各种程式中出现，从一ListBox中把选取到的选项加入到另一ListBox里，然后再继续接下去的动作。要用JavaScript来实做还蛮简单的，几行程式就能办到了。

让我们先来看Body部份的Code：



我在Form里面加了两个ListBox及两个按钮，每个ListBox都各自有四个选项；再来就是当按钮被Click时会触发insertList()函式。

来看insertList()函式的Code吧~



insertList()函式需要两个参数，第一个是要被加入新选项的List，第二个是选项来源的List，接着就是先产生一个option元件，再把opt加到tarObj里，最后就是指定opt的值及要被看到的字。怎样~是不是很简单呢！

那能不能把选到的选项加到另一个ListBox后，把原ListBox中的选项给移除掉呢？嘿嘿~当然是可以啰，只要在insertList()函式中加一行Code就行了。



只要在原来的insertList()函式中最后一行加入remove的指令就好了，酱就能当做到当把来源List中被选取的选项加入目标List后，顺便把来源List中被选取的选项给移除掉。

ㄟ~可是当选项全被移除完时，或是来源List没有选项被选取时，却又继续按的话，就会有错误发生了。这是因为ListBox的selectedIndex等于-1所引起的问题，我们只要在执行前判断来源List的selectedIndex是否为-1即可，若不等于-1则执行；反之则不做任何动作。



加了个if来判断来源List的selectedIndex若不等于-1时，则表示有选项被选取，所以才做新增option的动作。

其实还有蛮多变化可以玩，比如说：若来源List被选取的选项在目标List中已有的话就不新增...等等，这部份就给各位当做练习题啰。

范例浏览：

http://abgne.myweb.hinet...0006.html

以上内容于2005/09/07发表在小弟的Blog里http://blog.xuite.net/abgne/diary1/3907429