js实现-下拉列表左右选择

下拉列表左右选择
          * 下拉选择框
               <select>
                     <option>111</option>
                     <option>111</option>
               </select>

* 创建一个页面
                   ** 两个下拉选择框
                     - 设置属性 multiple属性
                   ** 四个按钮,有事件
                      * 选中添加到右边
                            步骤
                             /*
                                 1、获取select1里面的option
                                      - getElementsByTagName()返回是数组
                                      - 遍历数组,得到每一个option
                                 2、判断option是否被选中
                                      - 属性 selected,判断是否被选中
                                           ** selected= true: 选中
                                           ** selected= false:没有选择
                                 3、如果是选中,把选择的添加到右边去
                                 4、得到select2
                                 4、添加选择的部分
                                      - appendChild方法
                               */

* 全部添加到右边
                            步骤
                               /*
                                1、获取第一个select下面的option对象
                                2、返回数组,遍历数组
                                3、得到每一个option对象
                                4、得到select2
                                5、添加到select2下面
                                     - appendChild方法
                               */

* 选中添加到左边
                          步骤
                            /*
                               1、获取select2里面的option对象
                               2、返回是数组,遍历数组
                               3、得到每一个option对象
                               4、判断option是否被选中
                                    - if条件 属性 selected == true:选择
                               5、获取select1
                               6、添加到select1里面
                                     - 使用appendChild方法
                           */

* 全部添加到左边
                        步骤
                          /*
                              1、获取select2里面的option对象
                              2、返回是数组,遍历数组
                              3、得到每一个option对象

4、获取到select1
                              5、添加到select1里面
                                   - 使用appendChild方法
                         */

<body>

<div id="s1" style="float:left;">
        <div>
    <select id="select1" multiple="multiple" style="width:100px;height:100px;">
        <option>AAAAAAAA</option>
        <option>BBBBBBBB</option>
        <option>CCCCCCCC</option>
        <option>DDDDDDDD</option>
        <option>EEEEEEEE</option>
    </select>
    </div>

    <div>
    <input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
    <input type="button" value="全部添加到右边" onclick="allToRight();"/>
    </div>
</div>

<div id="s2">
        <div>
    <select id="select2" multiple="multiple" style="width:100px;height:100px;">
        <option>QQQQQQQQ</option>
    </select>
    </div>

    <div>
    <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
    <input type="button" value="全部添加到左边" onclick="allToLeft();"/>
    </div>
</div>

    <script type="text/javascript">

        //实现全部添加到左边
        function allToLeft() {
            /*
                1、获取select2里面的option对象
                2、返回是数组,遍历数组
                3、得到每一个option对象

                4、获取到select1
                5、添加到select1里面
                    - 使用appendChild方法
            */
            //获取select2
            var select2 = document.getElementById("select2");
            //获取select1
            var select1 = document.getElementById("select1");
            //获取select2里面的option
            var options1 = select2.getElementsByTagName("option");
            //遍历数组
            for(var m=0;m<options1.length;m++){
                //得到每一个option
                var op11 = options1[m];
                //添加到select1里面
                select1.appendChild(op11);
                m--;
            }
        }

        //选择添加到左边
        function selToLeft() {
            /*
                1、获取select2里面的option对象
                2、返回是数组,遍历数组
                3、得到每一个option对象
                4、判断option是否被选中
                    - if条件 属性 selected == true:选择
                5、获取select1
                6、添加到select1里面
                    - 使用appendChild方法
            */
            //获取select1
            var s1 = document.getElementById("select1");
            //获取到select2
            var s2 = document.getElementById("select2");
            //得到s1里面的option对象
            var opss = s2.getElementsByTagName("option");
            //遍历数组
            for(var aa=0;aa<opss.length;aa++) {
                //得到每一个option
                var op = opss[aa];
                //判断是否被选中
                if(op.selected == true) { //被选中
                    //添加到select1里面
                    s1.appendChild(op);
                    aa--;
                }
            }
        }

        //全部添加到右边
        function allToRight() {
            /*
                1、获取第一个select下面的option对象
                2、返回数组,遍历数组
                3、得到每一个option对象
                4、得到select2
                5、添加到select2下面
                    - appendChild方法
            */
            //得到select2
            var s2 = document.getElementById("select2");
            //得到select下面的option对象
            var s1 = document.getElementById("select1");
            var ops = s1.getElementsByTagName("option");//返回的是数组
            //遍历数组
            for(var j=0;j<ops.length;j++) {
                //得到每一个option对象
                var op1 = ops[j];
                //添加option到s2下面
                s2.appendChild(op1);
                j--;
            }
        }

        //实现选中添加到右边
        function selToRight() {

            /*
                1、获取select1里面的option
                    - getElementsByTagName()返回是数组
                    - 遍历数组,得到每一个option
                2、判断option是否被选中
                    - 属性 selected,判断是否被选中
                        ** selected= true: 选中
                        ** selected= false:没有选择
                3、如果是选中,把选择的添加到右边去
                4、得到select2
                4、添加选择的部分
                    - appendChild方法
            */
            //获取select1里面的option
            //获取select2
             var select2 = document.getElementById("select2");
            //得到select1
            var select1 = document.getElementById("select1");
            //得到option
            var options1 = select1.getElementsByTagName("option");

            //遍历数组
            for(var i=0;i<options1.length;i++) {
                var option1 = options1[i];//得到每一个option对象
                //判断是否被选中
                if(option1.selected == true) {
                    //添加到select2里面

                    select2.appendChild(option1);
                    i--;

                }
            }

        }

    </script>

 </body>
时间: 10-29

js实现-下拉列表左右选择的相关文章

jQuery学习(七)——使用JQ完成下拉列表左右选择

1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($("#left option:selected")) [假设左侧select定义了一个id=left] 第三步:将获取到的option添加到右侧的下拉列表中去.(append方法的使用) 3.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&q

JS常见面试题目 选择的第几个radio,name一样都叫radiogroup

<html> <head> <script language="javascript"> function parse() { } </script> </head> <body> <form onsubmit = "return parse()"> <input name="radioGroup" type="radio"/> &

js获取下拉列表(select)选中项的值和文本

获取下拉列表选中项的值和文本(select) <html> <head> <meta charset="utf-8"/> <title>获取下拉列表选中项的值和文本(select)</title> </head> <body> <select id="myselect"> <option value="fist">1</option&

[2.1] D3.js中关于如何选择,插入,删除元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论,本人博客首页为: http://blog.csdn.net/lzhlzz ,转载请注明出处,谢谢. 在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同时操作) 来看一个具体的例子,现有如下代码: <html> <head> <meta charse

JS控制GridView行选择

ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显示选择框,设置允许,则会在最左边多出一列,表示选择的行.而GridView则没有这个功能.但没有,不代表不能实现,下面我就通过JS来实现行选择的标识. 后台代码: protected void GridView1_RowDataBound(object sender, GridViewRowEven

下拉列表左右选择案例

单个添加的操作1.得到select里面的option       -getElementsByTagName()返回是数组       -遍历数组,得到每一个option 2.判断option是否被选中        -属性:selected 如果选中 selected=true 没有选中就是false3.如果选中,把选中的添加         -得到select          -添加到选择的部分 appendChild方法  全部选中添加的操作  1.获取第一个select下面的optio

JS实战 &#183; 级联菜单选择省份和城市(两种)

DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: b:明确事件,将事件注册到事件源上: c:通过JS的函数对象对事件进行封装: d:在处理过程中需要明确处理区域. 代码一如下: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta htt

angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件

最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性和参数即可实现,效果如下图(一截图就不显示鼠标的红色圆圈不可选的样式了...尴尬): 这里先附上我觉得简单易懂的JS实现方法,大家可以看看实现的原理: 以下代码就是最开始网上搜索的简单易懂的:http://www.cnblogs.com/tonghaolang/p/5972676.html <!DO

JS实现插入排序法和选择排序法

试着写了写,但对输出方式不太熟,所以注释部分的没能成功(我猜测是数据被覆盖了,所以最后运行结果都是'6'),或许不能用innerHTML来进行输出,暂时不管了,改天再研究研究JavaScript的输出方式. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 7 <body> 8 <!--p id = "x