移动select标签的数据

最新推荐文章于 2023-08-17 15:48:33 发布

LM_AC

最新推荐文章于 2023-08-17 15:48:33 发布

阅读量478

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Myair_AC/article/details/77801129

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1 . 先运行代码,看实现的什么功能,直接叙述的不太直观:
点击中间不同的按钮,会进行数据移动.> 是移动选中的第一个,>> :是移动选中的所有,>>> : 不用选中,直接把所有的移动到右边.
看代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            input {
                width: 100px;
                height: 33px;
            }
        </style>
    </head>

    <body>
        <select multiple="multiple" name="edu" id="edu" style="float: left;height: 200px;width: 200px;">
            <option value="幼儿园">幼儿园</option>
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大学">大学</option>
        </select>
        <div style="float: left;">
            <input type="button" value=">" onclick="leftToRight1()" /><br>
            <input type="button" value=">>" onclick="leftToRight2()" /><br>
            <input type="button" value=">>>" onclick="leftToRight3()" /><br>
            <input type="button" value="<"   onclick="RightToLeft1()" /><br>
            <input type="button" value="<<"   onclick="RightToLeft2()" /><br>
            <input type="button" value="<<<" onclick="RightToLeft3()"  /><br>
        </div>
        <select multiple="multiple" name="edu1" id="edu1" style="float: left;height: 200px;width: 200px;">


        </select>

        <script>
            /*获取左边列表选中的内容*/
            var  eduLeft =document.getElementById("edu");
           var   eduRight =document.getElementById("edu1");
            function leftToRight1() {
                /*eduLeft.selectedIndex:获取选中的索引：如果是多个，那么默认取第一个*/
                /* alert("===="+eduLeft.selectedIndex);*/
                var selectIndex1 = eduLeft.selectedIndex;
               //eduLeft.options[selectIndex1]左边以selectIndex1为下表的option结点
                 eduRight.appendChild(eduLeft.options[selectIndex1]);
            }

            function leftToRight2() {
                //获取select中的所有选项
                var  options1 = eduLeft.options;
                var  result=[];/*用来存储选中的所有项*/
                for(var i=0;i<options1.length;i++){
                    var  s =  options1[i];/*获取每一项*/
                    if(s.selected){
                    /*如果是选中的，直接加入到数组中*/
                      result.push(s);
                    }
                }
                //循环遍历取出选中的所有内容
                for(index in result ){
                    eduRight.appendChild(result[index]);
                }
            }

            function leftToRight3() {
               //获取select中的所有选项
                var  options1 = eduLeft.options;
                /*alert(options1.length);*/
                //循环遍历取出选中的所有内容
                var  result=[];/*用来存储选中的所有项*/

                for(var i=0;i<options1.length;i++){
                    var  s =  options1[i];/*获取每一项*/
                      result.push(s);
                }
                //循环遍历取出选中的所有内容
                for(index in result ){
                    eduRight.appendChild(result[index]);
                }




            }

            function RightToLeft1(){
                /*eduLeft.selectedIndex:获取选中的索引：如果是多个，那么默认取第一个*/
                /* alert("===="+eduLeft.selectedIndex);*/
               var selectIndex1 = eduRight.selectedIndex;

                eduLeft.appendChild(eduRight.options[selectIndex1]);
            }
            function RightToLeft2(){
                //获取select中的所有选项
                var  options1 = eduRight.options;

                var  result=[];/*用来存储选中的所有项*/
                for(var i=0;i<options1.length;i++){
                    var  s =  options1[i];/*获取每一项*/
                    if(s.selected){
                    /*如果是选中的，直接加入到数组中*/
                      result.push(s);
                    }
                }
                //循环遍历取出选中的所有内容
                for(index in result ){
                    eduLeft.appendChild(result[index]);
                }
            }
            function RightToLeft3(){
                //获取select中的所有选项
                var  options1 = eduRight.options;
                //循环遍历取出选中的所有内容
                var  result=[];/*用来存储选中的所有项*/

                for(var i=0;i<options1.length;i++){
                    var  s =  options1[i];/*获取每一项*/
                    /*如果是选中的，直接加入到数组中*/
                      result.push(s);
                }
                //循环遍历取出选中的所有内容
                for(index in result ){
                    eduLeft.appendChild(result[index]);
                }
            }
        </script>
    </body>

</html>

代码解析,只解析从左边移动到右边的:

leftToRight1()函数,先获取左侧右侧select控件eduLeft
eduLeft.selectedIndex是获取选中的索引：如果是多个，那么默认取第一个
给右侧追加eduRight.appendChild(eduLeft.options[selectIndex1])
eduLeft.options[selectIndex1] 这是选取指定下标的option
注意leftToRight2()函数的遍历,先是使用options1数组获取总的option,然后用s.selected判断是不是已经选中的,如果是选中的,就压入result数组,向右侧添加的时候得是遍历result数组,,为什么不直接遍历options1数组呢,这是因为在遍历的过程中这个数组是变化的.
当移除全部的数据的时候,在遍历给result数组push 数据的时候,就不用判断是否是已经选中.

        /*备注：使用以下两种方式，移动插入到右边的select中，问题移动效果错误：
                    原因： 移动到右边的过程中options1值大小再变;
           * 
           * */
        /*for(var i=0; i<5;i++){
             eduRight.appendChild(options1[i]);
        }*/

        /*for(index in options1 ){
            eduRight.appendChild(options1[index]);
        }*/

LM_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动select标签的数据

1 . 先运行代码,看实现的什么功能,直接叙述的不太直观: 点击中间不同的按钮,会进行数据移动.> 是移动选中的第一个,>> :是移动选中的所有,>>> : 不用选中,直接把所有的移动到右边. 看代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <s
复制链接

扫一扫