整理了一下以前写的一些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 option=lb1.getelementsbytagname("option");
lb2.appendchild(copyelement(option[i]));
for(var j=(str.length-1);j>=0;--j)
lb1.removechild(lb1.options[str.charat(j)]);
//<<
function leftall_data(listbook1,listbook2)
lb1.appendchild(copyelement(option[i]));
clearlistbox(listbook2);
//>>
function rightall_data(listbook1,listbook2)
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>
<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');"/>
<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>
</tr>
</table>
</form>
</body>
</html>
转载：http://www.cnblogs.com/over140/archive/2007/12/01/979567.html