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>