关闭

javascript 实现双向选取

569人阅读 评论(0) 收藏 举报

<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"  onclick="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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24254次
    • 积分:397
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:8篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论