<html>
<head>
<script language="javascript">
function moveOption(oFromList, oToList, bAll)
{
 var nFromLen = oFromList.options.length;
 var nToLen = oToList.options.length;
 var i = 0;
 while (nFromLen > 0)
  {
   if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;
nFromLen--;
}
 sortOption(oToList);
 }
 
 function compare(a,b)
 {
  if (a.text < b.text)
  return -1;
   else if (a.text > b.text)
    return 1;
return 0;
}

function sortOption(oList)
{
  if (oList.options.length > 1)
   {
       var optionList  = new Array();
   
for (var i=0; i < oList.options.length; i++)
  optionList.push(oList.options[i]);
  
   optionList.sort(compare);

oList.length = 0;
 for (var i=0; i < optionList.length; i++)
  oList.options[i] = optionList[i];
   } 
   }
   </script></head><body><form name="form1"><table align=center>
   <tr>
   
    <td width="77"> <div align="center">
        <select name="leftlist" multiple size="4">
          <option value="1">fason1</option>
          <option value="2">fason2</option>
          <option value="3">fason3</option>
          <option value="4">fason4</option>
        </select>
      </div></td>

    <td width="63"> <div align="center">
        <input type="button" value=" << " onclick="javascript:moveOption(rightlist, leftlist,true)">
        <br/>
        <input type="button" value=" <  " onclick="javascript:moveOption(rightlist, leftlist,false)">
        <br/>
        <input type="button" value=" >  " onclick="javascript:moveOption(leftlist, rightlist,false)">
        <br/>
        <input type="button" value=" >> " onclick="javascript:moveOption(leftlist, rightlist,true)">
      </div></td>
 
    <td width="46"> <div align="center">
        <select name="rightlist" multiple  size="4">
        </select>
      </div></td>
 </tr></table>
 
<p align="right">
</body>
</html>

解决方案 »

  1.   

    是add方法出现的问题,给你这个方法吧,还可以支持list多选转移/**
     * 移动select的部分内容,必须存在value,此函数以value为标准进行移动
     *
     * oSourceSel: 源列表框对象 
     * oTargetSel: 目的列表框对象
     */
    function moveSelected(oSourceSel,oTargetSel)
    {
        //建立存储value和text的缓存数组
        var arrSelValue = new Array();
        var arrSelText = new Array();
        //此数组存贮选中的options,以value来对应
        var arrValueTextRelation = new Array();
        var index = 0;//用来辅助建立缓存数组

        //存储源列表框中所有的数据到缓存中,并建立value和选中option的对应关系
        for(var i=0; i<oSourceSel.options.length; i++)
        {
            if(oSourceSel.options[i].selected)
            {
                //存储
                arrSelValue[index] = oSourceSel.options[i].value;
                arrSelText[index] = oSourceSel.options[i].text;
                //建立value和选中option的对应关系
                arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
                index ++;
            }
        }

        //增加缓存的数据到目的列表框中,并删除源列表框中的对应项
        for(var i=0; i<arrSelText.length; i++)
        {
            //增加
            var oOption = document.createElement("option");
            oOption.text = arrSelText[i];
            oOption.value = arrSelValue[i];
            oTargetSel.add(oOption);
            //删除源列表框中的对应项
            oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
        }
    }
      

  2.   

    <body>
    <script language="JavaScript">
    <!--
    /*move(s1,s2,flag):s1是源列表框,s2是目的列表框,flag是是否全部移动*/
    function move(s1,s2,flag){
    var tem=new Array();
    var sa=document.frm.elements[s1];
    var sb=document.frm.elements[s2];
    var s=sa.selectedIndex>-1?1:0
    with(sa)
    for(i=length-1;i>=0;i--)
    if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
    if(s||flag){
    for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]
    with(sb){
    length=0;
    tem.sort(sortArr)
    for(i=0;i<tem.length;i++)options[length]=new Option(tem[i].text,tem[i].value)
    }
    }
    }/*move_self(s,flag):s是列表框name,flag(1,-1),是上移或下移*/
    function move_self(s,flag){
    var sa=document.frm.elements[s]
    var tem;
    with(sa){
    if(flag==1){
    if(selectedIndex>0)
    for(i=0;i<length;i++)
    if(options[i].selected){
    tem_text=options[i].text;tem_value=options[i].value
    options[i].text=options[i-1].text;
    options[i].value=options[i-1].value;
    options[i-1].text=tem_text;options[i-1].value=tem_value
    options[i-1].selected=true;options[i].selected=false
    }
    }
    else
    for(i=length-1;i>=0;i--)
    if(options[i].selected){
    if(i==length-1)break;
    tem_text=options[i].text;tem_value=options[i].value
    options[i].text=options[i+1].text;
    options[i].value=options[i+1].value;
    options[i+1].text=tem_text;options[i+1].value=tem_value
    options[i+1].selected=true;options[i].selected=false
    }
    }
    }/*显示列表框选中的值,s是列表框的name*/
    function show(s){
    var str=""
    with(document.frm.elements[s])
    for(i=0;i<length;i++)
    if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value
    alert(str)
    }function sortArr(a,b){
    if(a.text>b.text)return 1
    if(a.text<b.text)return -1
    return 0
    }
    //-->
    </script>
    <form name="frm">
    <select name="a" size="5" style="width:100" multiple>
    <option value="a1">1</option>
    <option value="a2">2</option>
    <option value="a3">3</option>
    <option value="a4">4</option>
    </select>
    <input type=button value=">>" onclick="move('a','b',1)">
    <input type=button value=" > " onclick="move('a','b')">
    <input type=button value=" < " onclick="move('b','a')">
    <input type=button value="<<" onclick="move('b','a',1)">
    <select name="b" size="5" style="width:100" multiple>
    <option value="b1">a</option>
    <option value="b2">b</option>
    <option value="b3">c</option>
    <option value="b4">d</option>
    <option value="b5">e</option>
    </select><br/>
    <input type=button value="up" onclick="move_self('a',1)">
    <input type=button value="down" onclick="move_self('a',-1)">
    <input type=button value="up" onclick="move_self('b',1)">
    <input type=button value="down" onclick="move_self('b',-1)">
    <input type=button value="get a's value" onclick="show('a')">
    <input type=button value="get b's value" onclick="show('b')">
    </form>
    </body>
      

  3.   

    <script language="javascript">
    <!--
        function funright(){
        var strobjselect1=document.myform.myselect1;
    var strobjselect2=document.myform.myselect2;
    //var lenselect2=strobjselect2.options.length;
    strobjselect2.appendChild(strobjselect1[strobjselect1.selectedIndex]);
    //strobjselect1.remove(strobjselect1.options[strobjselect1.selectedIndex]);
    }
    function funleft(objform){
        var strobjselect1=objform.myselect1;
    var strobjselect2=objform.myselect2;
    //var lenselect1=objform.options.length;
    strobjselect1.appendChild(strobjselect2.options[strobjselect2.selectedIndex]);
    //strobjselect2.remove(strobjselect2.options[strobjselect2.selectedIndex]);
    }
    -->
    </script>
      

  4.   

    楼上几位大哥的函数都非常好使麻烦“ ssm1226(雨中人) ”,您可以把appendChild方法相关的介绍提供给我吗,我的书上没介绍这个方法,谢谢!