<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.   

    这个是梅老大的:)
    <body bgcolor="#FFFFFF">
    <table border=0 cellpadding=0 cellspacing=0><form name=meizz>
      <tr><td>
        <select id=list1 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></td>
      <td width=40 align=center>
        <input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
        <input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
      </td><td>
        <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
        </select>
      </td></tr></form>
    </table><script language="JavaScript"><!--
    function moveOption(e1, e2){
        try{
            var e = e1.options[e1.selectedIndex];
            e2.options.add(new Option(e.text, e.value));
            e1.options.remove(e1.selectedIndex);
        }   catch(e){}
    }
    //--></script></body>
      

  2.   

    <script language="javascript">
    function move(obja,objb)
    {
    if(!obja || obja.selectedIndex==-1) return;
    var thisopt = obja.options[obja.selectedIndex];
    objb.options.add(new Option(thisopt.text,thisopt.value));
    obja.options.remove(obja.selectedIndex);
    }
    </script>
    <select id="s" size="6" style="width:50" ondblclick="move(this,document.all.t);">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    </select>
    <select id="t" size="6" style="width:50" ondblclick="move(this,document.all.s);">
    </select>
      

  3.   

    KISSLAN老大太好了!!!!谢谢啦!!!!!!