JavaScript——DataListBox(组合框)

- 日理万妓 2021-09-19 07:14 310阅读 0赞

整理了一下以前写的一些Javascript代码，今天帖的是DataListBox，也许对大家有用！效果图：  
![2007-12-1_1.JPG][]  
Javascript代码：

< html >   
 < head >   
 < title > DataListBox </ title >   
 < style >   
input  \{    
 BORDER-RIGHT :  \#002D96 1px solid ;  PADDING-RIGHT :  2px ;  BORDER-TOP :  \#002D96 1px solid ;  PADDING-LEFT :  2px ;  FONT-SIZE :  12px ;  FILTER :  progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=\#FFFFFF, EndColorStr=\#9DBCEA) ;  BORDER-LEFT :  \#002D96 1px solid ;  CURSOR :  hand ;  COLOR :  black ;  PADDING-TOP :  2px ;  BORDER-BOTTOM :  \#002D96 1px solid  
 \}   
 </ style >   
 < script  language ="javascript"  type ="text/javascript" >   
 // <   
 function  left\_Data(ListBook1,ListBook2)  
\{  
     // 如果传的不是一个字符串 可以直接当对象用    
      var  lb1  = document.getElementById(ListBook1);  
     var  lb2 = document.getElementById(ListBook2);  
     var  option = lb2.getElementsByTagName( " option " );  
     // 下面的表达式可以拿到数据 也可以直接 ListBook1.appendChild 增加元素    
      // var option1=ListBook1.getElementsByTagName("option");   
      var  str = "" ;  
     for ( var  i = 0 ;i < option.length; \++ i)  
    \{  
         if (option\[i\].selected)  
        \{  
            lb1.appendChild(CopyElement(option\[i\]));  
            str \+= i;  
        \}  
    \}  
     for ( var  j = str.length \- 1 ;j >= 0 ; \-- j)  
    \{  
        lb2.removeChild(lb2.options\[str.charAt(j)\]);  
    \}  
\}  
 // >   
 function  right\_Data(ListBook1,ListBook2)  
\{  
     var  lb1  = document.getElementById(ListBook1);  
     var  option = lb1.getElementsByTagName( " option " );  
     var  lb2 = document.getElementById(ListBook2);  
     var  str = "" ;  
     for ( var  i = 0 ;i < option.length; \++ i)  
    \{  
         if (option\[i\].selected)  
        \{  
            lb2.appendChild(CopyElement(option\[i\]));  
            str \+= i;  
        \}  
    \}  
      
     for ( var  j = (str.length \- 1 );j >= 0 ; \-- j)  
    \{  
        lb1.removeChild(lb1.options\[str.charAt(j)\]);  
    \}  
      
\}  
 // <<   
 function  leftAll\_Data(ListBook1,ListBook2)  
\{  
     var  lb1  = document.getElementById(ListBook1);  
     var  lb2 = document.getElementById(ListBook2);  
     var  option = lb2.getElementsByTagName( " option " );  
     for ( var  i = 0 ;i < option.length; \++ i)  
    \{  
        lb1.appendChild(CopyElement(option\[i\]));  
    \}  
    ClearListBox(ListBook2);  
\}  
 // >>   
 function  rightAll\_Data(ListBook1,ListBook2)  
\{  
     var  lb1  = document.getElementById(ListBook1);  
     var  option = lb1.getElementsByTagName( " option " );  
     var  lb2 = document.getElementById(ListBook2);  
     for ( var  i = 0 ;i < option.length; \++ i)  
    \{  
        lb2.appendChild(CopyElement(option\[i\]));  
    \}  
    ClearListBox(ListBook1);  
\}  
 // 拷贝元素    
 function  CopyElement(option)  
\{  
     var  NewOption  =  document.createElement( " option " );  
    NewOption.setAttribute( " value " ,option.value);  
    NewOption.appendChild(document.createTextNode(option.text));  
     return  NewOption;  
\}  
 // 清空元素   
 function  ClearListBox(ListBook)  
\{  
     var  lb1 = document.getElementById(ListBook);  
     while (lb1.childNodes.length > 0 )  
    \{  
        lb1.removeChild(lb1.childNodes\[ 0 \]);  
    \}  
\}  
 </ script >   
 </ head >   
  
 < body >   
 < form  name ="frm"  method ="post"  action ="" >   
 < table >   
     < tr >   
         < td >   
             < select  name ="ListBox1"  multiple ="multiple"  rows ="5"  height ="120" >   
                 < option  value ="sh" > 上海 </ option >   
                 < option  value ="bj" > 北京 </ option >   
                 < option  value ="tj" > 天津 </ option >   
                 < option  value ="cq" > 重庆 </ option >   
             </ select >   
         </ td >   
         < td >   
             < input  type ="button"  value =">"  onclick ="right\_Data('ListBox1','ListBox2');" />   
             < input  type ="button"  value =">>"  onclick ="rightAll\_Data('ListBox1','ListBox2');" />   
             < input  type ="button"  value ="<"  onclick ="left\_Data(ListBox1,'ListBox2');" />   
             < input  type ="button"  value ="<<"  onclick ="leftAll\_Data('ListBox1','ListBox2');" />   
         </ td >   
         < td >   
             < select  name ="ListBox2"  multiple ="multiple"  rows ="5"  height ="120" >   
                 < option  value ="sz" > 苏州 </ option >   
                 < option  value ="hz" > 杭州 </ option >   
                 < option  value ="jz" > 荆州 </ option >   
                 < option  value ="qz" > 靖州 </ option >   
             </ select >   
         </ td >   
     </ tr >   
 </ table >   
 </ form >   
 </ body >   
 </ html >

本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586556，如需转载请自行联系原作者

[2007-12-1_1.JPG]: /images/20210726/48f287c1268246a5a50ec545bbea9530.png