javascript 实现双向选取

原创 2006年05月18日 14:36:00

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

相关文章推荐

五十行javascript代码实现简单的双向数据绑定

http://www.cnblogs.com/smartXiang/p/6759282.html 五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前...

JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)

什么是双向数据绑定呢? 简单的说 就是UI视图与数据绑定在了一块 也就是数据和视图是同步改变的 双向数据绑定最常见的应用场景就是表单 (应用场景还是很有限的)现在我们要实现这样一个简单的数据...

WebBrowser中Javascript和Winform代码之间实现双向通信

WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc...
  • SJF0115
  • SJF0115
  • 2013年12月09日 22:25
  • 3315

五十行javascript代码实现简单的双向数据绑定

五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便。今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享...

javascript实现数据双向绑定的三种方式

前端数据的双向绑定方法  前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前...

JavaScript跨域插件 实现双向跨域

由于浏览器的限制,JavaScript 跨域的问题,一直是一个颇为棘手的问题。HTML5 提供了跨文档消息传输的功能,在网页文档之间互相接收与发送信息。使用这个功能,不仅同源(域 + 端口号)的 We...
  • cwqcwk1
  • cwqcwk1
  • 2013年11月18日 20:39
  • 3971

WebBrowser实现Javascript和Winform代码之间实现双向通信

WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc...

数据结构与算法Javascript描述(四)双向链表

尽管从链表的头节点遍历到尾节点很简单,但反过来,从后向前遍历则没那么简单。通过给Node 对象增加一个属性,该属性存储指向前驱节点的链接,这样就容易多了。此时向链表插入一个节点需要更多的工作,我们需要...
  • cwzhsi
  • cwzhsi
  • 2016年03月10日 16:38
  • 833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 实现双向选取
举报原因:
原因补充:

(最多只允许输入30个字)