[JavaScript]操作下拉列表

最新推荐文章于 2022-05-30 17:11:48 发布
Jia的博客
最新推荐文章于 2022-05-30 17:11:48 发布
阅读量4.3k
点赞数 1
分类专栏： JavaScript 文章标签： javascript javaweb android mysql jQuary
本文链接：https://blog.csdn.net/Konaji/article/details/50799527
版权
JavaScript 专栏收录该内容
17 篇文章 0 订阅
订阅专栏
操作下拉列表
<!DOCTYPE html>
<html>
<head>
    <title>下拉列表</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        /*
            列表移动思想:
                1: <select>下拉标签有个selectedIndex属性 , 
                        当下拉标签调用该属性时,
                        会返回当前列表中--->第一个被选中的<option>的下标,
                        利用此思想,获取下拉列表数组,利用返回的下标
                        用第二个下拉标签appendChild(),即可实现移动
                2: 双击事件 : ondblclick
                3: JS中的数组长度是非定长的,所以在for循环中,
                   绝对不能使用数组的长度做条件,应获取数组长度,使用定量做条件

                   例如:
                        //选中的从左边移到右边
                        document.getElementById("rightPart").onclick = function () {
                            var one = document.getElementById("one");
                            var oneItems = one.getElementsByTagName("option");
                            //这里获取数组长度,做循环条件!!!!!!!!
                            var length = oneItems.length;
                            var two = document.getElementById("two");
                            //条件为 i < length , 不能为 oneItems.length (它是变化的) !!!
                            for (var i = 0; i < length; i++) {
                                if (one.selectedIndex!=-1) {
                                    //每次移动前返回被选中的第一个的下标!!!one.selectedIndex
                                    two.appendChild(oneItems[one.selectedIndex]);
                                }
                            }
                        } 


        */
        window.onload = function () {
        /************************************************************************************/
            //选中的从左边移到右边
            document.getElementById("rightPart").onclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第一个下拉列表所有项
                var oneItems = one.getElementsByTagName("option");
                var length = oneItems.length;
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //遍历第一个下拉列表
                for (var i = 0; i < length; i++) {
                    if (one.selectedIndex!=-1) {
                        two.appendChild(oneItems[one.selectedIndex]);
                    }
                }
            }


        /************************************************************************************/
            //选中的从左边全部右移
            document.getElementById("rightAll").onclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第一个下拉列表所有项
                var oneItems = one.getElementsByTagName("option");
                var length = oneItems.length;
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //遍历
                for (var i = 0; i < length; i++) {
                    two.appendChild(oneItems[0]);
                }
            }

        /************************************************************************************/
            //双击时把左侧下拉列表右移
            document.getElementById("one").ondblclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第一个下拉列表所有项
                var oneItems = one.getElementsByTagName("option");
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //在第二个下拉列表添加选中的下拉项
                two.appendChild(oneItems[one.selectedIndex]);
            }


        /************************************************************************************/
            //选中的从右边移到左边
            document.getElementById("leftPart").onclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //获取第二个下拉列表的下拉项
                var twoItems = two.getElementsByTagName("option");
                //获取第二个下拉列表的长度
                var length = twoItems.length;
                //遍历
                for (var i = 0; i < length ; i++) {

                    if (two.selectedIndex!=-1) {
                        one.appendChild(twoItems[two.selectedIndex]);
                    }
                }


            }

        /************************************************************************************/
            //选中的从右边全部移到左边
            document.getElementById("leftAll").onclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //获取第二个下拉列表的下拉项
                var twoItems = two.getElementsByTagName("option");
                //获取第二个下拉列表的长度
                var length = twoItems.length;
                //遍历
                for (var i = 0; i < length; i++) {
                    one.appendChild(twoItems[0]);
                }
            }

        /************************************************************************************/
            //双击时把右侧下拉列表左移
            document.getElementById("two").ondblclick = function () {
                //获取第一个下拉列表
                var one = document.getElementById("one");
                //获取第二个下拉列表
                var two = document.getElementById("two");
                //获取第二个下拉列表的下拉项
                var twoItems = two.getElementsByTagName("option");
                //在第一个下拉列表添加选中的下拉项
                one.appendChild(twoItems[two.selectedIndex]);
            }
        }
    </script>
</head>
<body>
<!-- multiple="multiple" : 允许多选 , size : 下拉列表长度 -->
<select name="one" multiple="multiple" size="8" id="one" style="width: 70px;">
    <option value="语文">语文</option>
    <option value="数学">数学</option>
    <option value="英语">英语</option>
    <option value="物理">物理</option>
    <option value="化学">化学</option>
    <option value="生物">生物</option>
</select>

<input type="button" value="把选中的右移" id="rightPart"></input>
<input type="button" value="全部右移" id="rightAll"></input>
<input type="button" value="把选中的左移" id="leftPart"></input>
<input type="button" value="全部左移" id="leftAll"></input>

<select name="two" multiple="multiple" size="8" id="two" style="width: 70px;"></select>

</body>
</html>