JavaScript案例五：下拉列表左右选择

用JavaScript实现下拉列表左右选择，很简单，不过要特别注意循环时要注意变量是否发生了变化（见代码）

<!DOCTYPE html>

<html>

  <head>

    <title>JavaScript下拉列表左右选择</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" >

        function chooseToRight()

        {

            var op=document.getElementById("s1").getElementsByTagName("option");

            var select2=document.getElementById("s2");

            var k=op.length;

            for(var i=0;i<k;i++)

            {

                if(op[i].selected==true)

                {

                    select2.appendChild(op[i]);

                    k--;i--;            //这里要特别注意！！！因为appendChild相当于剪切，所以每次循环之后要执行k--,i--

                }

            }

        }

        function chooseToLeft()

        {

            var op=document.getElementById("s2").getElementsByTagName("option");

            var select2=document.getElementById("s1");

            var k=op.length;

            for(var i=0;i<k;i++)

            {

                if(op[i].selected==true)

                {

                    select2.appendChild(op[i]);

                    k--;i--;

                }

            }

        }

        function allToLeft()

        {

            var op=document.getElementById("s2").getElementsByTagName("option");

            var select2=document.getElementById("s1");

            var k=op.length;

            for(var i=0;i<k;i++)

            {

                select2.appendChild(op[i]);

                k--;i--;

            }

        }

        function allToRight()

        {

            var op=document.getElementById("s1").getElementsByTagName("option");

            var select2=document.getElementById("s2");

            var k=op.length;

            for(var i=0;i<k;i++)

            {

                select2.appendChild(op[i]);

                k--;i--;

            }

        }

    </script>

  </head>

  <body>

  <div style="float: left">

      <select id="s1" multiple="multiple" style="width: 120px;height: 150px">

          <option>AAAAAAA</option>

          <option>BBBBBBB</option>

          <option>CCCCCCC</option>

          <option>DDDDDDD</option>

          <option>EEEEEEE</option>

      </select><br><br>

      <input type="button" value="选中添加到右边" onclick="chooseToRight();"/><br><br>

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

  </div>

  <div style="float: left">

      <select id="s2" multiple="multiple" style="width: 120px;height: 150px">

          <option>1111111</option>

          <option>2222222</option>

          <option>3333333</option>

          <option>4444444</option>

          <option>5555555</option>

      </select><br><br>

      <input type="button" value="选中添加到左边" onclick="chooseToLeft();"/><br><br>

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

  </div>

  </body>

</html>

运行效果：

aaarticlea/png;base64,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" alt="" />

JavaScript案例五：下拉列表左右选择的更多相关文章

JavaScript基础2——下拉列表左右选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js实现-下拉列表左右选择
下拉列表左右选择 * 下拉选择框 <select> <option>111</opt ...
JavaScript案例开发之扑克游戏
随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...
Jquery实现下拉列表左右选择
知识点: jquery 的 click dbclick 事件 appendTo方法 <!DOCTYPE html> <html> <head> <met ...
jQuery学习(七)——使用JQ完成下拉列表左右选择
1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...
JavaScript学习笔记之下拉选择框的操作
对于下拉框的操作十分繁多,这几天项目须要就总结一下一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...
WPF案例 (五) 对控件界面使用倒影
原文:WPF案例 (五) 对控件界面使用倒影在这个程序里对5个2D控件界面应用了垂直倒影,边缘模糊化和模型变换,在本例中,这5个2D控件为Border, 各包含了一幅Image,界面如下图所示,源码 ...
javascript中五种基本数据类型
前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...
ASP.NET,C#后台调用前台javascript的五种方法
C#后台调用前台javascript的五种方法由于项目需要,用到其他项目组用VC开发的组件,在web后台代码无法访问这个组件,所以只好通过后台调用前台的javascript,从而操作这个组件.在网上 ...

随机推荐

lamp 网站打不开，不显示也不报错，
原因是该网站的编程员,习惯简写,<? ?>;而服务器版本的php.ini 默认不支持只支持<?php ?>这种格式. 解决方法vim /usr/loacl/php/etc/ph ...
论文的构思！姚小白的html5游戏设计开发与构思----给审核我论文的导师看的
此处只为笔记游戏么基本上确定是用canvas做个能一只手玩的游戏!基本打飞机之类的.毕竟手机也就上下班玩玩的.上下班么基本就是一只手拉着扶手一只手撸啊撸! 当然啦,如果能搞出超级牛逼的游戏,比如刺客 ...
javascript单体模式
单体模式的思想在于保证一个特定类仅有一个实例.这意味着当第二次使用同一个类创建的新对象的时候,应该得到与第一个所创建的对象完全相同. javacript中并没有类,因此对单体咬文嚼字的定义严格来说并没 ...
endnote参考文献格式设置
endnote参考文献格式调整: 在office word 2010中加载了endnote x7插件之后,使用过程中发现格式有点乱,不该斜的地方斜体显示,该加方框[]的地方却没有方框,因此从网路上找资 ...
IIS网站发布部署
Windows—控制面板——程序和功能——打开或关闭Windows功能——Internet信息服务(IIS),一定要选中ASP.Net. 1.打开你的VS2012网站项目,右键点击项目>菜单中 ...
NGUI的部分控件无法更改layer？
http://momowing.diandian.com/post/2012-09-17/40038835795 今天狗日的遇到这样的问题,这是一个imagebutton:,它的层定义为:,NGUI里 ...
Linux / UNIX create soft link with ln command
How to: Linux / UNIX create soft link with ln command by NIXCRAFT on SEPTEMBER 25, 2007 · 42 COMMENT ...
C++ Set
set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...
使用豆瓣的pypi源
配置文件位置: 1.linux ~/.pip/pip.conf 2.windows %HOME%\pip\pip.ini 配置文件内容:[global] index-url = http://pypi ...
[Linux] AWK命令详解（大全）
转载自:http://caoyanbao.iteye.com/blog/570868 什么是awk? 你可能对UNIX比较熟悉,但你可能对awk很陌生,这一点也不奇怪,的确,与其优秀的功能相比,awk ...

JavaScript案例五：下拉列表左右选择

JavaScript案例五：下拉列表左右选择的更多相关文章

随机推荐

热门专题