HTML下拉列表的左右选择

最新推荐文章于 2024-07-09 14:10:47 发布

CoderJu

最新推荐文章于 2024-07-09 14:10:47 发布

阅读量3.3k

点赞数 2

分类专栏： HTML 文章标签： html select 下拉列表

本文为博主原创文章，转载请注明出处！谢谢！！！

本文链接：https://blog.csdn.net/system_obj/article/details/48757225

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是基于html的下拉列表的左右选择的案例；页面效果如下：

这里写图片描述

具体代码如下：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>


 <div id="s1" style="float:left">
    <div>
        <select id="select1" multiple="multiple" style="widyh=100px;height=100px">
             <option value ="volvo">Volvo</option>
             <option value ="saab">Saab</option>
             <option value="opel">Opel</option>
             <option value="audi">Audi</option>
        </select>
    </div>
    <div>
        <input type="button" value = "choice>>" onclick="selectLeft()"/><br/>
        <input type="button" value = "all>>" onclick="allLeft()"/><br/>
    </div>
</div>

<div id="s2" >
    <div>
        <select select id="select2" multiple="multiple" style="widyh=100px;height=100px">
            <option >海马</option>
        </select>
    </div>
    <div>
        <input type="button" value = "<<choice" onclick="selectRight()"/><br/>
        <input type="button" value = "<<all" onclick="allRight()"/><br/>
    </div>
</div>
</body>
<script type ="text/javascript">
    function selectLeft()
    {
        var select2 = document.getElementById("select2");
        var select1 = document.getElementById("select1");
        var options1= select1.getElementsByTagName("option");
        for (var i=0;i<options1.length ;i++ )
        {
            option1=options1[i];

                if(option1.selected==true)
                    {
                        select2.appendChild(option1);
                        i--;
                    }

        }
    }
    function allLeft()
    {
        var select2 = document.getElementById("select2");
        var select1 = document.getElementById("select1");
        var options1= select1.getElementsByTagName("option");
        for (var i=0;i<options1.length ;i++ )
        {
            option1=options1[i];
            select2.appendChild(option1);
            i--;
        }
    }

    function selectRight()
    {
        var select2 = document.getElementById("select2");
        var select1 = document.getElementById("select1");
        var options2= select2.getElementsByTagName("option");
        for (var a=0;a<options2.length ;a++ )
        {
            option2=options2[a];

                if(option2.selected==true)
                    {
                        select1.appendChild(option2);
                        a--;
                    }

        }
    }
    function allRight()
    {
        var select2 = document.getElementById("select2");
        var select1 = document.getElementById("select1");
        var options2= select2.getElementsByTagName("option");
        for (var a=0;a<options2.length ;a++ )
        {
            option2=options2[a];
            select1.appendChild(option2);
            a--;
        }
    }


</script>
</html>