JavaScript——DataListBox(组合框)

简介:

整理了一下以前写的一些Javascript代码,今天帖的是DataListBox,也许对大家有用!效果图:

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 >
本文转自博客园农民伯伯的博客,原文链接:JavaScript——DataListBox(组合框) ,如需转载请自行联系原博主。
目录
相关文章
|
7月前
|
JavaScript 前端开发
JavaScript 窗口
JavaScript 窗口
|
7月前
|
JavaScript 前端开发
JavaScript实现放大镜效果
JavaScript实现放大镜效果
29 0
|
7月前
|
JavaScript 前端开发
JavaScript实现拖拽
JavaScript实现拖拽
|
JavaScript 前端开发
Javascript-拖拽效果
Javascript-拖拽效果
46 0
|
前端开发 JavaScript
JavaScript-拖拽效果
JavaScript-拖拽效果
90 0
JavaScript-拖拽效果
|
JavaScript 前端开发
|
前端开发 JavaScript
javaScript实现放大镜效果
javaScript实现放大镜效果
javaScript实现放大镜效果
|
JavaScript 前端开发
JavaScript日期选择控件Kalendae
在线演示 本地下载
1015 0
|
JavaScript 前端开发 测试技术