javascript 实现双向选取

<HTML>
 <HEAD>
  <title>CompnayList</title>

  
  <script language="javascript"> 
   
   function add()
   {
    rightlist=document.getElementById("lbCompanyList");
    leftlist=document.getElementById("lbCompanySelected");
    moveOption(rightlist,leftlist,false);
   }
   
   function remove()
   {
    rightlist=document.getElementById("lbCompanyList");
    leftlist=document.getElementById("lbCompanySelected");
    moveOption(leftlist,rightlist,false);
    
   }
   
   //move option form oFromList to oToList
   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); 
   } 
   //compare two character's text value
   function  compare(a,b) 
   { 
    if(a.text < b.text) 
      return -1; 
    else if(a.text > b.text) 
      return 1; 
    return 0; 
   } 
   
   //sort options
   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 id="Form1" method="post">
   <div>
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
     <tr>
       <td>
       <table cellSpacing="0" cellPadding="0" width="100%" align="center" bgColor="#f5f5f5" border="0">
        <tr style="HEIGHT: 100px">
         <td style="HEIGHT: 167px" width="15%">&nbsp;</td>
         <td style="HEIGHT: 167px" width="50%">
          <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
           <TR>
            <TD style="HEIGHT: 20px" width="20%"><FONT face="宋体">Useable CompanyList</FONT></TD>
            <TD style="HEIGHT: 20px" vAlign="bottom" width="10%"></TD>
            <TD style="HEIGHT: 20px" width="20%"><FONT face="宋体">&nbsp;&nbsp;&nbsp;Selected
              CompanyList</FONT></TD>
            <TD style="HEIGHT: 20px" width="50%"></TD>
           </TR>
           <tr>
            <td width="40%" rowSpan="2">

               <select id="lbCompanyList"  name="lbCompanyList" multiple size="20" style="width:200px;height:250px"> 
              <option  value="Micro">MicroSoft</option> 
              <option  value="IBM">IBM</option> 
              <option  value="Google">Google</option> 
              <option  value="Sun">Sun</option> 
               </select>

              
                   </p></td>
            <td width="10%" height="157" vAlign="bottom" style="HEIGHT: 37px">
            <br><br><br><br><br><br><br>
             <input type="button" id="addCompany" value="Add"  οnclick="add()">
             
             <br>
             </td>
            <td width="40%" rowSpan="2">
              <select id="lbCompanySelected" name="lbCompanySelected"  multiple size="20" style="width:200px;height:250px">             
              </select>
             
             </td>
            <td width="50%" rowSpan="2">&nbsp;</td>
           </tr>
           <tr>
             <td vAlign="top" height="109">
             <br><br><br><br>
             <input type="button" id="delCompany"   value="Remove" onClick="remove()"></td>
           </tr>
          </table>
         </td>

         <tr style="HEIGHT: 28px">
         <td height="13" colSpan="2" bgColor="#ffffff">
          <div><FONT face="宋体"></FONT>&nbsp;</div>
          </td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
   </div>
  </form>
 </body>
</HTML>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值