?

< table >

??? < tr >

?????? < td >

?????????? < select name = "allauthors" multiple = "multiple" size = "8" >

????????????? < option > fasdf </ option >

????????????? < option > dfghdf </ option >

????????????? < option > ertewrt </ option >

??? ??? ?????? < option > vcbncvbn </ option >

?????????? </ select >

?????? </ td >

??? ??? < td >

?????????? < input type = "button" value = " 增加 >>"

??? onclick = "javascript:moveitem(form1.allauthors, form1.authorIds);" >

?????????? < br >

?????????? < input type = "button" value = " << 刪除 "

??? onclick = "javascript:moveitem(form1.authorIds, form1.allauthors);" >

?????? </ td >

?????? < td >

?????????? < select name = "authorIds" multiple = "multiple" size = "8" >

?????????? </ select >

?????? </ td >

??? </ tr >

</ table >

?

< script type = "text/javascript" >

??? //fromSel: 源選擇框， toSel: 目標選擇框

??? function moveitem(fromSel, toSel) {

?????? var fromOpts = fromSel.options; // 源選擇項列表數組

?????? var toOpts = toSel.options; ? // 目標選擇項列表數組

?????? var idx = 0; // 當前索引

?????? var toLen = toOpts.length; // 目標選擇框已有的項數

?????? // 遍歷所有的源選擇項列表數組

?????? for ( var i=fromOpts.length-1; i>=0; i--) {

?????????? if (fromOpts[i].selected) { // 如果選中

?????????? ??? toOpts[toLen+idx] = new Option(fromOpts[i].text, fromOpts[i].value); // 添加到目標選擇框中

?????????? ??? fromOpts[i] = null ; // 刪除源選擇框中的選中項

?????????? ??? idx++;

?????????? }

?????? }

??? }

</ script >

左右添加刪除的效果