<form name=form1>
<select id=list1 multiple size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)">
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
<select id=list2 multiple size=8 ondblclick="moveOption(this, this.form.list1)">
</select>
</form>
<script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options
for(i=e.length-1;i>=0;i--){
if(e[i].selected){
e2.options.add(new Option(e[i].text, e[i].value));
e2.options[e2.options.length-1].selected=true;
e1.options.remove(i);}}
} catch(e){}
}
//--></script>
<select id=list1 multiple size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)">
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
<select id=list2 multiple size=8 ondblclick="moveOption(this, this.form.list1)">
</select>
</form>
<script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options
for(i=e.length-1;i>=0;i--){
if(e[i].selected){
e2.options.add(new Option(e[i].text, e[i].value));
e2.options[e2.options.length-1].selected=true;
e1.options.remove(i);}}
} catch(e){}
}
//--></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Selection</title>
<style>
td{white-space:nowrap};
body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
</style>
</head><body bgcolor=eeeeee><table>
<tr >
<td>
<select name=SrcSelect size=6 style="font-size:11pt;width=200;height=160px" multiple >
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
</select>
</td>
<td align="center">
<input align="left" type=button value="→" onclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect)" ><br><br>
<input align="left" type=button value="←" onclick="moveLeftOrRight(document.all.ObjSelect,document.all.SrcSelect)" >
</td>
<td>
<select name=ObjSelect size=6 style="font-size:11pt;width=200;height=160px" multiple >
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
</select>
</td>
<td>
<input type=button value="↑" onclick="moveUp()" ><br><br>
<input type=button value="↓" onclick="moveDown()" >
</td>
</tr>
</table>
</body>
<script language=javascript>
function moveUp()
{
var theObj=document.all.ObjSelect;
for(var i=1;i<theObj.length;i++)
{
if( theObj.options[i].selected && !theObj.options[i-1].selected )
{
var tempOption=new Option(theObj.options[i-1].text,theObj.options[i-1].value);
theObj.options[i-1].removeNode(true);
theObj.add(tempOption,i);
}
}
}
function moveDown()
{
var theObj=document.all.ObjSelect;
for(var i=theObj.length-2;i>-1;i--)
{
if( theObj.options[i].selected && !theObj.options[i+1].selected )
{
var tempOption=new Option(theObj.options[i].text,theObj.options[i].value);
theObj.options[i].removeNode(true);
theObj.add(tempOption,i+1);
theObj.options[i+1].selected=true;
}
}
}
function moveLeftOrRight(fromObj,toObj)
{
var lengthOfToObj=toObj.length;
for(var i=fromObj.length-1;i>-1;i--)
{
if(fromObj.options[i].selected)
{
toObj.add(new Option(fromObj.options[i].text,fromObj.options[i].value),lengthOfToObj);
toObj.options[lengthOfToObj].selected=true;
fromObj.options[i].removeNode(true);
}
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>made by meixx</title>
<script language="javascript">
<!--
function Add(ObjSource,ObjTarget){
for(var i=0;i<ObjSource.length;i++){
if(ObjSource.options[i].selected){
var opt=document.createElement("OPTION");
ObjTarget.add(opt);
opt.value=ObjSource.options[i].value;
opt.text=ObjSource.options[i].text;
ObjSource.options.removeChild(ObjSource.options[i--]);
opt.selected=true;
}
}
}
function AddAll(ObjSource,ObjTarget){
SelectAll(ObjSource);
Add(ObjSource,ObjTarget);
}
function SelectAll(ObjSource){
for(var i=0;i<ObjSource.length;i++){
ObjSource.options[i].selected=true;
}
}function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head><body>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<select name="dltSource" size="10" multiple style="width:100% ">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
<option value="0">河南</option>
<option value="0">江苏</option>
<option value="0">浙江</option>
<option value="0">海南</option>
<option value="0">福建</option>
<option value="0">山东</option>
<option value="0">青海</option>
<option value="0">宁夏</option>
<option value="0">内蒙古</option>
<option value="0">新疆</option>
<option value="0">陕西</option>
</select>
</td>
<td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="->" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>
<p style="width:100%" align="center"><input type="button" value="=>" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input type="button" value="<-" onClick="Add(frmDisplay.dltTarget,document.all.dltSource)" title="删除"></p>
<p style="width:100%" align="center"><input type="button" value="<=" onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)" title="删除全部"></p>
</td>
<td width="150">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<select name="dltTarget" size="10" multiple style="width:100% "></select>
</form>
</td>
</tr>
<tr>
<td align="center">作者:梅雪香</td>
<td align="center">ver:1.0</td>
<td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">
<input type="button" value="提交" onClick="doSubmit()">
</td>
</tr>
</table></body>
</html>