博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

两个ListBox控件内容互换

Posted on 2007-05-25 16:59  快乐家++  阅读(580)  评论(0)  编辑  收藏  举报





 
<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>   
  
  
  
  
  
  <script   language=javascript> 
  
  
  
/*
    向下移动
*/
function moveUp(theObj)       
{     
    for(var i=1;i<theObj.length;i++)   
    {   
        if( theObj.options[i].selected && !theObj.options[i-1].selected   )   
        {   
            var tempOption=new Option(theObj.options[i-1].text,theObj.options[i-1].value);   
            theObj.options[i-1].removeNode(true);   
            theObj.add(tempOption,i);   
        }   
    }   
}       



/*
    向下移动
*/
function moveDown(theObj)       
{     
    for(var i=theObj.length-2;i>-1;i--)   
    {   
        if( theObj.options[i].selected && !theObj.options[i+1].selected)   
        {   
            var tempOption=new Option(theObj.options[i].text,theObj.options[i].value);   
            theObj.options[i].removeNode(true);   
            theObj.add(tempOption,i+1);   
            theObj.options[i+1].selected=true;   
        }   
    }   
}       
    


/*
 *  向右，或向左移动 
**/        
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>       

  
  
  </head>   
    
  <body   bgcolor=eeeeee>   
    
    
    
  <table>   
  <tr   >     
  <td>     
  <select   name=SrcSelect   size=6  ondblclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect);";  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(document.all.ObjSelect)"   ><br><br>   
  <input   type=button   value="↓"     onclick="moveDown(document.all.ObjSelect)"   >   
  </td>   
  </tr>     
  </table>   
  </body>       
</html>