<table border=0>
<tr><td>
<SELECT NAME="sel1" style="width:100px" size="10" multiple>
<option value="" selected>--请选择--
<option value="1" >产品1
<option value="2">产品2
<option value="3">产品3
<option value="4">产品4
</SELECT>
<td><input type="button" value=">>>" onclick="move(document.all.sel1,document.all.sel2)">
<br><br><br>
<input type="button" value="<<<" onclick="move(document.all.sel2,document.all.sel1)">
<td>
<SELECT NAME="sel2" style="width:100px" size="10" multiple>
<option value="" selected>--请选择--
<option value="5">产品5
<option value="6">产品6
<option value="7">产品7
<option value="8">产品8
</SELECT>
</td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function move(obj1,obj2){
for(i=0;i<obj1.length;i++){
if(obj1.options[i].selected && obj1.options[i].value!=""){
var obj=new Option(obj1.options[i].text,obj1.options[i].value)
obj2.options[obj2.length]=obj
obj1.options[i].value=""
obj1.options[i].text="" }
}
delitem(obj1)
sortitem(obj2)
}
function delitem(box){
for(i=0;i<box.length;i++){
if(box.options[i].value=="" && box.options[i].text==""){
for(j=i;j<box.length-1;j++){
box.options[j].value=box.options[j+1].value
box.options[j].text=box.options[j+1].text
}
box.length--
i=0
}
}
}
function sortitem(box){
var temp=new Array()
for(i=0;i<box.length;i++){
for(j=i+1;j<box.length;j++){
if(box.options[i].value>box.options[j].value){
temp[0]=box.options[i].value
temp[1]=box.options[i].text
box.options[i].value=box.options[j].value
box.options[i].text=box.options[j].text
box.options[j].value=temp[0]
box.options[j].text=temp[1] }
}
}
}
//-->
</SCRIPT>
<tr><td>
<SELECT NAME="sel1" style="width:100px" size="10" multiple>
<option value="" selected>--请选择--
<option value="1" >产品1
<option value="2">产品2
<option value="3">产品3
<option value="4">产品4
</SELECT>
<td><input type="button" value=">>>" onclick="move(document.all.sel1,document.all.sel2)">
<br><br><br>
<input type="button" value="<<<" onclick="move(document.all.sel2,document.all.sel1)">
<td>
<SELECT NAME="sel2" style="width:100px" size="10" multiple>
<option value="" selected>--请选择--
<option value="5">产品5
<option value="6">产品6
<option value="7">产品7
<option value="8">产品8
</SELECT>
</td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function move(obj1,obj2){
for(i=0;i<obj1.length;i++){
if(obj1.options[i].selected && obj1.options[i].value!=""){
var obj=new Option(obj1.options[i].text,obj1.options[i].value)
obj2.options[obj2.length]=obj
obj1.options[i].value=""
obj1.options[i].text="" }
}
delitem(obj1)
sortitem(obj2)
}
function delitem(box){
for(i=0;i<box.length;i++){
if(box.options[i].value=="" && box.options[i].text==""){
for(j=i;j<box.length-1;j++){
box.options[j].value=box.options[j+1].value
box.options[j].text=box.options[j+1].text
}
box.length--
i=0
}
}
}
function sortitem(box){
var temp=new Array()
for(i=0;i<box.length;i++){
for(j=i+1;j<box.length;j++){
if(box.options[i].value>box.options[j].value){
temp[0]=box.options[i].value
temp[1]=box.options[i].text
box.options[i].value=box.options[j].value
box.options[i].text=box.options[j].text
box.options[j].value=temp[0]
box.options[j].text=temp[1] }
}
}
}
//-->
</SCRIPT>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2722" name=GENERATOR></HEAD>
<BODY MS_POSITIONING="GridLayout"><FONT face=宋体></FONT><FONT face=宋体></FONT><FONT face=宋体></FONT><BR><BR>
<FORM id=Form1 action=do.asp method=post>
<TABLE align=center>
<TBODY>
<TR align=middle>
<TD width=160><SELECT style="WIDTH: 120px" size=10 name=list1> <OPTION value=1>1111111</OPTION> <OPTION value=2>2222222</OPTION> <OPTION value=3>3333333</OPTION> <OPTION value=4>4444444</OPTION> <OPTION value=5>5555555</OPTION> <OPTION value=6>6666666</OPTION> <OPTION value=7>7777777</OPTION></SELECT></TD>
<TD><INPUT onclick=add() type=button value="增 加>>>"> <BR><BR><INPUT onclick=del() type=button value="<<<删 除"> </TD>
<TD width=79><SELECT id=seqItem style="WIDTH: 120px" multiple size=10 name=seqItem></SELECT></TD>
<TD width=79></TD></TR></TBODY></TABLE>
<DIV align=center><INPUT onclick=doRe() type=button value="重 置"> <INPUT onclick=goClick() type=button value="提 交" name=ok> </DIV></FORM>
<SCRIPT language=javascript>
var seqSelect=document.forms[0].seqItem;
//var length=5;
function doRe(){
document.forms[0].action="";
document.forms[0].submit();
}
function setCursor(objStyle,cursor)
{
objStyle.cursor = cursor;
}
function goClick()
{
var res=""
{for(var i=0;i<seqSelect.options.length;i++ )
res=res+","+seqSelect.options[i].value
}
alert(res);
}
function add_singer(object,value,text)//添加数据
{
if(singer_exist(object,value)==false)
{
object.options.add(new Option(text,value,true,true));
return true;
}
return false;
}
function remove_singer(object,index)//删除数据
{
if(index<0)return false;
object.options.remove(index)
}
function singer_exist(object,value)//检查是否存在
{
for(var i=0;i<object.options.length; i++)
{
if(object.options[i].value==value)
return true;
}
return false;
}
function add()
{
var obj1=document.all.list1;
var index=obj1.selectedIndex;
if (index<0) return false;
value=obj1.options[index].value;
text=obj1.options[index].text;
var obj2=document.all.seqItem;
add_singer(obj2,value,text)
remove_singer(obj1,index)
}
function del()
{
var obj2=document.all.seqItem;
var index=obj2.selectedIndex;
if (index<0) return false;
value=obj2.options[index].value;
text=obj2.options[index].text;
var obj1=document.all.list1;
add_singer(obj1,value,text)
remove_singer(obj2,index)
}
</SCRIPT>
</BODY></HTML>
<title>移动、交换SELECT内容</title>
<style type="text/css">
<!--
body { background-color:#CECECE;}
button { font-family:"webdings";font-size:10px;width:17px;height:15px;line-height:4px;}
select { font-family:"Verdana";font-size:11px;}
-->
</style>
<script>var createDate = "2003.8.23";</script>
<script language="javascript" defer>
//添加事件
fromSel.attachEvent("ondblclick",new Function("MoveOptions(fromSel,toSel)"))
toSel.attachEvent("ondblclick",new Function("MoveOptions2(toSel,fromSel)"))
LeftButton.attachEvent("onmouseup",new Function("MoveOptions(fromSel,toSel)"))
RightButton.attachEvent("onmouseup",new Function("MoveOptions2(toSel,fromSel)"))
//移动函数
function MoveOptions(oFrom,oTo) {
for (var i=1;i<oFrom.length;i++) {
if (oFrom.options[i].selected) {
//alert([oTo.length]);
var j;
j = oTo.length;
//alert(j);
oTo.options[oTo.length] = new Option(oFrom.options[i].text,oFrom.options[i].value);
oTo.options[j].selected = true
//oFrom.options[i--] = null;
if (event.type=="dblclick") return;
}
}
}
function MoveOptions2(oFrom,oTo){
for (var i=1;i<oFrom.length;i++){
if (oFrom.options[i].selected){
//oFrom.options[oTo.length] = new option(oFrom.options[i].text,oFrom.options[i].value);
oFrom.options[i--] = null;
if (event.type=="dblclick") return;
}
}
}
//交换函数
function SwapOptions(obj,direction) {
var objIndex = obj.selectedIndex;
var swapIndex=direction=="up"?objIndex-1:objIndex+1;
if ((swapIndex==obj.length&&direction=="down")||(swapIndex==-1&&direction=="up")||obj.selectedIndex==0||swapIndex<=0) return;
obj.options[objIndex].swapNode(obj.options[swapIndex]);
}
</script>
<body>
<table width="165" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<button onmouseup="SwapOptions(fromSel,'up')">5</button>
<button onmouseup="SwapOptions(fromSel,'down')">6</button>
</td></tr>
<tr><td>
<select id="fromSel" multiple size=10>
<option>---请选择要进入的网站---</option>
<option>CSND.net</option>
<option>MSND.com</option>
<option>Blueidea.com</option>
<option>51job.com</option>
<option>Yahoo.com</option>
<option>Pchome.net</option>
<option>Sina.com.cn</option>
</select>
</td></tr>
<tr><td align="center">
<button id="RightButton">7</button>
<button id="LeftButton">8</button>
</td></tr>
<tr><td>
<select id="toSel" multiple size=10>
<option>---请选择感兴趣的网站---</option>
</select>
</td></tr>
<tr><td align="right">
<button onmouseup="SwapOptions(toSel,'up')">5</button>
<button onmouseup="SwapOptions(toSel,'down')">6</button>
</td></tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}function deleteFromDestList() {
var destList = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
}
}
}
// -->
</SCRIPT>
</head>
<body>
<center>
<form method="POST">
<table bgcolor="#FFFFCC"><tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
这是一段csdn中的5星GG的代码,大家共享;
<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=ObjSource.length-1;i>=0;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>
leo963258
wen1818(冷月孤心)功能有点少
gbsck(秋石)选多个上下移动时会有问题。另外
chenmax(小刀)别拿五星来唬人哦,可能只是别人信手写的一段代码
zhaoxiaoyang(梅雪香@深圳)选中多个左右移动时顺序会颠倒,最好可以改进一下
JK_10000(JK1)没考虑其它浏览器啊不过,对于回答问题来说
都已经提供了思路和主要代码,
都已经足够了。也贴一段代码以供参考<html><head>
<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 )
{
theObj.options[i].swapNode(theObj.options[i-1]);
}
}
}
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 )
{
theObj.options[i].swapNode(theObj.options[i+1]);
}
}
}
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>