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实现数据双向绑定的三种方式

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

非常简单的js双向数据绑定框架(三):js model黑科技

初衷之前我们要在js域更新model,需要这样:model.set('name', 'sub');这实在太土了。。。 我们希望像angularjs一样,直接:$scope.name = 'sub';...
  • vctisildur
  • vctisildur
  • 2015年06月11日 10:52
  • 12121

数据结构--链表(js版)

JavaScript版的数据结构--链表 链表是由一组节点组成的集合。每个节点都使用一个对象的引用指向它的后继,指向另一个节点的引用叫做链。链表一般有一个头节点。...
  • weixin_35987513
  • weixin_35987513
  • 2016年10月16日 17:39
  • 3152

javascript跨域插件 实现双向跨域

  • 2013年12月07日 17:20
  • 3KB
  • 下载

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

http://www.cnblogs.com/smartXiang/p/6759282.html 五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前...
  • zdy0_2004
  • zdy0_2004
  • 2017年04月25日 00:40
  • 280

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

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

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

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

JavaScript跨域插件 实现双向跨域

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

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

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

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

WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc...
  • shibing624
  • shibing624
  • 2014年05月10日 15:21
  • 949
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 实现双向选取
举报原因:
原因补充:

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