求完整功能的两个列表项间选项移动！

<HTML>
<HEAD>
<TITLE>多项目选择脚本</TITLE>
</HEAD>
<BODY id=all text=#000000 bgColor=#336699>
<script language="JavaScript">
/**
 * 方法名称：copyToList
 * 功能描述: 从一个列表里把数据移到另一个列表中
 * 参数: fromElement,toElement  要拷贝的原列表id,和目标列表id
 */
function copyToList(fromElement,toElement)
{
  if (typeof fromElement=="string"){//获取列表引用
    var fromList = document.getElementById(fromElement);
  }
  if (typeof toElement=="string"){//获取目标列表引用
    var toList = document.getElementById(toElement);
  }   
  
  var sel = false;
  for (i=0;i<fromList.options.length;i++){//fromList.options表示fromList的所有选项列表,实际是一个数组
    var current = fromList.options[i];
    if (current.selected){//检验是否被选中
      sel = true;
  txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);//新建一个value和text都和选中列表相同的option
      fromList.options[i] = null;//删除原列表里的选项
      i--;
    }
  }
  if (!sel) alert ('你还没有选择任何项目');
}/**
 * 方法名称: allSelect
 * 功能说明: 全选中某个列表里的内容.以便提交整个列表
 * 参数说明: element 要全选的列表id或引用
 */
function allSelect(element){
  if (typeof element=="string"){//获取列表引用
    var element = document.getElementById(element);
  }
  var List = element;//列表引用复制给List   
  if (List.length == 0) return;//如果列表当前为空,返回
  for (i=0;i<List.length;i++)//列表不为空,逐个选中
  {
     List.options[i].selected = true;
  }  
}</script> <table border="0">
   <form onSubmit="" >
     <tr>
   <td>
     <select name="possible" size="4" MULTIPLE width=200 style="width: 200px">
   <option value="中国广州">中国广州
   <option value="中国上海">中国上海
   <option value="中国北京" onclick="this.index=0">中国北京
   <option value="中国武汉">中国武汉
 </select>
   </td>
   
      <td ><a href="javascript:copyToList('possible','chosen')"><font size="5" face="Webdings">8</font></a> 
        <br>
       <br>
       <a href="javascript:copyToList('chosen','possible')"><font size="5" face="Webdings">7</font></a>
   </td>
   <td>
       <select name="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
           </select>
       </td>
</tr>  
  </form>
</table> 
<input type="button" value="selectAll(possible)" onclick="allSelect('possible');">
<input type="button" value="selectAll(chosen)" onclick="allSelect('chosen');"></BODY>
</HTML>

解决方案 »

  1.   

    http://www.mattkruse.com/javascript/selectbox/have a good luck
      

  2.   

    http://fason.nease.net/samples/js/moveoptions.html
      

  3.   

    看看这个：
    http://www.mattkruse.com/javascript/optiontransfer/
    至于右侧选项能上下移动这个功能还是自己加吧。
      

  4.   

    <script>
    //用input记录所选,防止刷新,后退后数据还原.
    /* Start */
    window.onbeforeunload=function()
    {
        document.all.leftopt.value = document.all.left.outerHTML;
        document.all.rightopt.value = document.all.right.outerHTML;
    }
    window.onload=function()
    {
        if(document.all.leftopt.value!="")document.all.left.outerHTML=document.all.leftopt.value;
        if(document.all.rightopt.value!="")document.all.right.outerHTML=document.all.rightopt.value;
    }
    /* End */
    function addopt(locs,mylocs)
    {
        for(var i = 0;i<locs.options.length;i++)
        {
            var opt = locs.options[i];
            if(opt.selected)
            {
                var flag = true;
                for(var j = 0;j<mylocs.options.length;j++)
                {
                    var myopt = mylocs.options[j];
                    if(opt.value == myopt.value)
                    {
                        flag = false;
                    }
                }
                if(flag)
                {
                   locs.options[i] = null;
       i--;
                   mylocs.options[mylocs.options.length] = new Option(opt.text,opt.value,true,true)
                }
            }
        }
    }
    </script>
    <table> 
            <TR> 
            <td><b> 选择节点组 </b></td> 
            <td> 
                         <table> 
                         <tbody> 
                         <TR> 
                         <TD> 
                         <SELECT multiple name=left size=8 style="width:100"> 
                           <option value=1>1 
                           <option value=2>2 
                           <option value=3>3 
                           <option value=4>4 
                         </SELECT> 
                         </TD> 
                        <TD> 
                        <INPUT onclick=addopt(document.all.left,document.all.right) type=button value=添加> 
                        <BR><BR> 
                        <INPUT onclick=addopt(document.all.right,document.all.left) type=button value=删除> 
                        </TD> 
                        <TD> 
                        <P> 
                         <SELECT multiple name=right size=8 style="width:100"> 
                        </SELECT> 
                        </P> 
                        </TD> 
                        </TR> 
                        </TBODY> 
                        </TABLE> 
            </td> 
    </tr> 
    </table> 
    <input type=hidden name=leftopt>
    <input type=hidden name=rightopt>