下拉列表框组合

来源：互联网发布：天猫双11销售额数据图编辑：程序博客网时间：2024/04/29 00:23

效果如下：

<html>

<head>

<title></title>
<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.value));
    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="aaa">aaa</option>
                <option value="bbb">bbb</option>
                <option value="ccc">ccc</option>
                <option value="ddd">ddd</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="eee">eee</option>
                <option value="fff">fff</option>
                <option value="ggg">ggg</option>
                <option value="kkk">kkk</option>
            </select>
        </td>
    </tr>
</table>
</form>
</body>

</html>