整理了一下以前写的一些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 >
< 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(组合框)
,如需转载请自行联系原博主。