有人問說：如何做出在網頁中將某個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