整理了一下以前写的一些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>