请问怎么实现几个list之间的相互移动?难！发分！

Question

可以在n个select间相互移动，只要传递两个select的名字就行了
<table width = 520 border =1 align = center>
  <tr>
    <td width = 150 align = center>
      <Select name = Province id = Province size = 7 multiple = true ondblclick ="SelectAll(this)">
        <option value = 1>山东
        <option value = 2>江苏
        <option value = 3>安徽
        <option value = 4>河北
        <option value = 5>河南
        <option value = 6>江西
        <option value = 7>山西
        <option value = 8>陕西
        <option value = 9>宁夏
        <option value = 0>辽宁
      </Select>
    </td>
    <td width = 170 align = center>
      <img src = '../img/create.gif'  style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.Province,document.all.NewProvince)>
      <img src = '../img/release.gif' style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.Province)>
    </td>
    <td width = 150 align = center>
      <Select name = NewProvince id = NewProvince size = 7 multiple = true ondblclick ="SelectAll(this)">
   
      </Select>
    </td>
    <td width = 170 align = center>
      <img src = '../img/create.gif'  style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.SecProvince)>
      <img src = '../img/release.gif' style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.SecProvince,document.all.NewProvince)>
    </td>
    <td width = 150 align = center>
      <Select name = SecProvince id = SecProvince size = 7 multiple = true ondblclick ="SelectAll(this)">
   
      </Select>
    </td>
  </tr>
  <tr height = 80>
    <td align = center>
       <select id = Sel1>
         <option>AA
         <option>BB
         <option>CC
         <option>AA
         <option>BB
         <option>DD
       </select><br>Source          
    </td>
    <td colspan = 3 align = center>
       <input type = button value = Add onclick = "Add()">
    </td>
    <td align = center>
      <select id = Sel2>
      </select><br>Target
    </td>
  </tr>
</table><script language = javascript>
/*
 *多选下拉列表动态增加函数：Create(SourseObject,TargetObject)；
 *参数:SourseObject:表示要动态添加的源Select；
 *参数:TargetObject:表示要动态接受的目的Select；
 *例:Create(document.all.SourSelect,document.all.TarSelect);
 *作者:月影飞鸿 于 2003-05-26晚作
*/
 function Create(SourceSelect,TargetSelect)
 {
    var IsCreate = true;
    var theIndex  = SourceSelect.selectedIndex;
    var theLength = SourceSelect.length ;
    if (theIndex == -1 ) //如果源Select为空的话，则退出过程
        return false;
    while (IsCreate)     //添加到目的Select循环
    {
        theValue = SourceSelect.options[theIndex].text;  //得到所选择的文本
      
        TargetSelect.options.add(new Option(theValue));  //目的Select增加一个文本
     
        theIndex = theIndex + 1;   //如果是选择多列的话，对下一个进行处理
        
        if (theIndex == theLength) //theLength 如果是4的话，则theIndex应该是3，
        {                          //如果两者想等的话，则源Select多了一个值，
            IsCreate = false;      //所以需要退出循环
            break;
        }
        if (SourceSelect.options[theIndex].selected == false)//如果没有被选择的话，则退出循环
        {
            IsCreate = false;
        }
    }    
    
    while (IsCreate == false)                  //删除源select循环
    {
       SecIndex  = SourceSelect.selectedIndex; //动态得到被选择的索引
       theLength = SourceSelect.length ;       //动态得到Select的长度
       SourceSelect.remove(SecIndex);          //删除指定索引的元素
       if (theLength == 1)                     //表示最后一个元素已删除，
           return false;                       //源select空了，退出循环
       if (theLength == SecIndex + 1)          //表示多选的已全部删掉，退出循环
           return false;
       if (SourceSelect.options[SecIndex].selected == false)
       {
           IsCreate = true;
       }
    }
 }
  
 function SelectAll(theSel)  //双击全部选中函数
 { 
    for (i = 0 ;i<theSel.length;i++)
    {
      theSel.options[i].selected = true;    
    }
 }
 
 function Add()
 {
   YesIt = false;
   SelectText = Sel1.options[Sel1.selectedIndex].text;
   for (i = 0 ;i < Sel2.length ; i++)
   {
     if (Sel2.options[i].text == SelectText)
     {
        alert("Target中已经存在！");
        YesIt = true;
     }
   }
   if (YesIt == false)
   {
     Sel2.options.add(new Option(SelectText));
     YesIt = true;
   }
   if (Sel2.length == 0)
   {
     Sel2.options.add(new Option(SelectText));
   }
 }
</script>

Answer 1

<table>
<tr>
<td valign=top>
<select name=s1 multiple size=4 style="width:100">
<option value=1>aaaaaa
<option value=2>bbbbbb
<option value=3>cccccc
<option value=4>dddddd
<option value=5>eeeeee
<option value=6>ffffff
<option value=7>gggggg
<option value=8>hhhhhh
</select>
</td>
<td valign=middle align=center>
<input type=button name=b4 value=">" onClick="move(1)"><br>
<input type=button name=b5 value="<" onClick="move(2)">
</td>
<td valign=top>
<select name=s2 multiple size=4 style="width:100">
</select>
</td>
</tr>
<tr>
<td>
<input type=button name=b1 value=向上 onClick="up()">
<input type=button name=b2 value=向下 onClick="down()">
</td>
<td>
<input type=button name=b3 value=查看 onClick="show()">
</td>
<td>
</td>
</tr>
</table><script>
function up() {
  s = document.all.s1;
  v = new Array();
  for(i=0;i<s.length-1;i++) {
    if(! s.options[i].selected && s.options[i+1].selected) {
      v.value = s.options[i].value;
      v.text = s.options[i].text;
      v.selected = s.options[i].selected;
      s.options[i].value = s.options[i+1].value;
      s.options[i].text = s.options[i+1].text;
      s.options[i].selected = s.options[i+1].selected;
      s.options[i+1].value = v.value;
      s.options[i+1].text = v.text;
      s.options[i+1].selected = v.selected;
    }
  }
}function down() {
  s = document.all.s1;
  v = new Array();
  for(i=s.length-1;i>0;i--) {
    if(! s.options[i].selected && s.options[i-1].selected) {
      v.value = s.options[i].value;
      v.text = s.options[i].text;
      v.selected = s.options[i].selected;
      s.options[i].value = s.options[i-1].value;
      s.options[i].text = s.options[i-1].text;
      s.options[i].selected = s.options[i-1].selected;
      s.options[i-1].value = v.value;
      s.options[i-1].text = v.text;
      s.options[i-1].selected = v.selected;
    }
  }
}function show() {
  s = document.all.s1;
  v = "";
  for(i=0;i<s.length;i++)
    v += s.options[i].value + ":" + s.options[i].text + "\n";
  alert(v);
}function move(m) {
  if(m == 1) {
    ss1 = document.all.s1;
    ss2 = document.all.s2;
  }
  if(m == 2) {
    ss1 = document.all.s2;
    ss2 = document.all.s1;
  }
  v = new Array();
  k = 0;
  for(i=0;i<ss1.length;i++) {
    if(ss1.options[i].selected) {
      ss2.options[ss2.length] = new Option(ss1.options[i].text,ss1.options[i].value);
      v[k] = i;
      k++;
    }
  }
  for(i=v.length-1;i>=0;i--)
    ss1.options[v[i]] = null;
}
</script>

Answer 2

是要这个效果？
<script>
function mychange()
{
temp=document.all.leftdiv.innerHTML;
document.all.leftdiv.innerHTML=document.all.rightdiv.innerHTML;
document.all.rightdiv.innerHTML=temp;
}
</script>
<table><tr><td>
<div id=leftdiv>
<select name=sel1 size=3>
<option>11
<option>12
<option>13
</select>
</div>
</td><td>
<div id=rightdiv>
<select name=sel2 size=3>
<option>21
<option>22
<option>23
</select>
</div>
</td></tr>
<tr><td><input type=button value=">>" onclick=mychange()></td><td><input type=button value="<<" onclick=mychange()></td></tr>
</table>

Answer 3

<script language="JavaScript">
<!--
function s(n,m){
var a=eval("document.form1.s"+n)
var b=eval("document.form1.s"+m)
b.options[b.options.length]=new Option(a.options[a.selectedIndex].text,a.options[a.selectedIndex].value)
a.options[a.selectedIndex]=null;
}
//-->
</script>
<form method="POST" action="--WEBBOT-SELF--" name="form1">
  <select size="5" name="s1" ondblclick="s(1,2)">
    <option id="a1" value="1">1asdasddasd</option>
    <option >2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <select size="5" name="s2" ondblclick="s(2,1)">
    <option id="a2" value="1">1asdasddasd</option>
    <option >2</option>
    <option>3</option>
    <option>4</option>
  </select></p>
</form>

Answer 4

不是这样的，是列表框的位置可以移动，不是里面的内容可以移动！
像这个一样：http://e.my.yahoo.com/config/eval_layout?.page=p1&.done=http%3A%2F%2Fcn.my.yahoo.com%2Fp%2Fd.html

Answer 5

你要得是这个效果？<select id="s0">
<option>a
</select>
<select id="s1">
<option>b
</select>
<select id="s2">
<option>c
</select>
<br>
<input type=button onclick="test()" value="swap"><script>
var eln = 1
function test() {
  var n = (eln+1)%3;
  eval("s"+eln).swapNode(eval("s"+n));
  eln = n;
}
</script>

Answer 6

seabell和xuzuning的接近我的要求！

Answer 7

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);var leftobj;
var rightobj;
var midobj;
function onload()
{
leftobj=Layer1;
rightobj=Layer3;
midobj=Layer2;
}var leftpos='96px';
var midpos='296px';
var rightpos='496px';function left2Mid()
{
var temp;
leftobj.style.left=midpos;
midobj.style.left=leftpos;
temp = midobj;
midobj=leftobj;
leftobj=temp;
}function mid2Right()
{
var temp;
midobj.style.left=rightpos;
rightobj.style.left=midpos;
temp = rightobj;
rightobj=midobj;
midobj=temp;
}function right2Left()
{
var temp;
leftobj.style.left=rightpos;
rightobj.style.left=leftpos;
temp = rightobj;
rightobj=leftobj;
leftobj=temp;
}function moveMe(obj)
{
if(obj.style.left==leftpos)
{
left2Mid();
}
else if(obj.style.left==midpos)
{
mid2Right();
}
else
{
right2Left();
}
}</script>
</head><body bgcolor="#FFFFFF" text="#000000" onload="onload()">
<form name=form1>
<input type=hidden name=name1 value=Layer1>
<input type=hidden name=name2 value=Layer2>
<input type=hidden name=name3 value=Layer3>
<div id="Layer1" name="myLayer1" style="position:absolute; left:96px; top:28px; width:180px; height:100px; z-index:1; overflow: auto"> 
  <p align=right><input type=button name=right1 value='-->' onclick="moveMe(this.parentNode.parentNode);"></p>
  <p>flower</p>
  <p>flower</p>
  <p>flower</p>
  <p>flower</p>
  <p>flower</p>
  <p>flower</p>
  flower</div>
<div id="Layer2" style="position:absolute; left:296px; top:28px; width:180px; height:100px; z-index:2; overflow: auto"> 
<p align=right><input type=button name=right2 value='-->' onclick=moveMe(Layer2);></p>
  <p>tree</p>
  <p>tree</p>
  <p>tree</p>
  <p>tree</p>
  <p>tree</p>
  <p>tree</p>
  <p>tree</p>
  <p>&nbsp;</p>
</div>
<div id="Layer3" style="position:absolute; left:496px; top:28px; width:180px; height:100px; z-index:3; overflow: auto">
<p align=right><input type=button name=right3 value='-->' onclick=moveMe(Layer3);></p>
  <p>sun</p>
  <p>sun</p>
  <p>sun</p>
  <p>sun</p>
  <p>sun</p>
  <p>sun</p>
  <p>&nbsp;</p>
</div>
</form>
</body>
</html>

Answer 8

那请你具体说明你的要求，我不想在yahoo注册

Answer 9

消息收到，看下面这个
<script>
function mychange(obj1,obj2)
{
temp=document.all(obj1).innerHTML;
document.all(obj1).innerHTML=document.all(obj2).innerHTML;
document.all(obj2).innerHTML=temp;
}
</script>
<table><tr><td>
<div id=leftdiv>
<select name=sel1 size=4>
<option>qq11
<option>qq12
<option>qq13
</select>
</div>
</td><td>
<div id=middiv>
<select name=sel2 size=4>
<option>yahoo21
<option>yahoo22
<option>yahoo23
<option>yahoo24
</select>
</div>
</td><td>
<div id=rightdiv>
<select name=sel3 size=4>
<option>msn31
<option>msn32
<option>msn33
<option>msn34
</select>
</div>
</td></tr>
<tr><td><input type=button value=">>" onclick=mychange("leftdiv","middiv")></td>
<td><input type=button value="<<" onclick=mychange("leftdiv","middiv")>
&nbsp;&nbsp;&nbsp;<input type=button value=">>" onclick=mychange("middiv","rightdiv")></td>
<td align=right><input type=button value="<<" onclick=mychange("middiv","rightdiv")></td></tr>
</table>