用js实现两个select下拉框之间的元素互相移动

最新推荐文章于 2022-10-04 21:41:19 发布

sweetllh

最新推荐文章于 2022-10-04 21:41:19 发布

阅读量1.7k

点赞数 1

分类专栏： javascript 表格

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

表格

8 篇文章 0 订阅

订阅专栏

Javascript代码

    <script type="text/javascript">  


        /**选中的元素向右移动**/  
        function moveRight()  
        {  

                //得到第一个select对象  
            var selectElement = document.getElementById("first");  
            var optionElements = selectElement.getElementsByTagName("option");  
            var len = optionElements.length;  


            if(!(selectElement.selectedIndex==-1))   //如果没有选择元素，那么selectedIndex就为-1  
            {  

                //得到第二个select对象  
                var selectElement2 = document.getElementById("secend");  

                    // 向右移动  
                    for(var i=0;i<len ;i++)  
                    {  
                        selectElement2.appendChild(optionElements[selectElement.selectedIndex]);  
                    }  
            } else  
            {  
                alert("您还没有选择需要移动的元素！");  
            }  
        }  

        //移动所有的到右边  
        function moveAll()  
        {  
            //得到第一个select对象  
            var selectElement = document.getElementById("first");  
            var optionElements = selectElement.getElementsByTagName("option");  
            var len = optionElements.length;  
            //alert(len);  

            //将第一个selected中的数组翻转  
            var firstOption = new Array();  
            for(var k=len-1;k>=0;k--)  
            {  
                firstOption.push(optionElements[k]);  

            }  
            var lens = firstOption.length;  
                //得到第二个select对象  
            var selectElement2 = document.getElementById("secend");  
            for(var j=lens-1;j>=0;j--)  
            {  
                selectElement2.appendChild(firstOption[j]);  
            }  
        }  

        //移动选中的元素到左边  
        function moveLeft()  
        {  
            //首先得到第二个select对象  
            var selectElement = document.getElementById("secend");  
            var optionElement = selectElement.getElementsByTagName("option");  
            var len = optionElement.length;  

            //再次得到第一个元素  
            if(!(selectElement.selectedIndex==-1))  
            {  
                var firstSelectElement = document.getElementById("first");  
                for(i=0;i<len;i++)  
                {  
                    firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引  
                }  
            }else  
            {  
                alert("您还没有选中要移动的项目!");  
            }  
        }  

        //全部向左移  
        function moveAllLeft()  
        {  
            var selectElement = document.getElementById("secend");  
            var optionElements = document.getElementsByTagName("option");  
            var len = optionElements.length;  
            var optionEls = new Array();  
            for(var i=len-1;i>=0;i--)  
            {  
                optionEls.push(optionElements[i]);  
            }  
            var lens = optionEls.length;  

            var firstSelectElement = document.getElementById("first");  
            for(var j=lens-1;j>=0;j--)  
            {  
                firstSelectElement.appendChild(optionEls[j]);  
            }  
        }  
    </script>

html加css代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
    <style type="text/css">  
        .select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}  
        .select_move_1 { float:left;}  
        .select_move_2 { float:left;}  
        .select_move_3 { float:left;}  
    </style>  
    </head>  

    <body>  
        <div class="select_move">  

            <div class="select_move_1">  
              <select name="first" size="10" id="first" multiple="multiple">  
                <option value="宝马">宝马</option>  
                <option value="丰田">丰田</option>  
                <option value="奥迪">奥迪</option>  
                <option value="凯迪拉克">凯迪拉克</option>  
                <option value="现代">现代</option>  
                <option value="奔驰">奔驰</option>  
                <option value="法拉利">法拉利</option>  

              </select>  
            </div>  
              <div class="select_move_2">  
                    <input type="button" value="------>" onclick="moveRight()"/><br />  
                    <input type="button" value="===>" onclick="moveAll()" /><br />  
                    <input type="button" value="<------"  onclick="moveLeft()"/><br />  
                    <input type="button" value="<===" onclick="moveAllLeft()"/>  
              </div>  
            <div class="select_move_3">  
                 <select size="10" id="secend" multiple="multiple">  
                 </select>  
            </div>  
        </div>  

    </body>  
    </html>

sweetllh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js实现两个select下拉框之间的元素互相移动

Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getEleme
复制链接

扫一扫

专栏目录