下拉列表框组合_vs下拉列表控件下拉内容-优快云博客

本文链接：https://blog.youkuaiyun.com/tjgmail/article/details/1388083

本文介绍了一种使用JavaScript实现两个列表框之间的数据选择性及全部数据的互相转移的方法。通过具体的HTML页面代码和JavaScript函数说明了如何将选中或全部选项从一个列表框移动到另一个列表框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

<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>