?
<
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
>
左右添加刪除的效果