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,从而操作这个组件.在网上 ...

随机推荐

Socket网络编程（3）--两端通信
上篇博文:http://www.cnblogs.com/wolf-sun/p/3329558.html 介绍了客户端连接服务端,一对一,多对一的情况,下面实现服务器接收消息的功能.LZ这些弄的比较慢, ...
GDB中应该知道的几个调试方法来自陈皓
GDB中应该知道的几个调试方法 2011年2月10日陈皓发表评论阅读评论62,325 人阅读七.八年前写过一篇<用GDB调试程序>,于是,从那以后,很多朋友在MSN上以及给我发邮件询 ...
jquery json ajax
当html中用script包含了不在同一个目录下的js外部文件(主要是为了通用代码的重用)时,这个js文件的内容就如同在当前html文件中了,写jquery的时候不用考虑路径问题,可以直接引用htm ...
lamp环境centos6.4
http://www.centos.bz/2011/09/centos-compile-lamp-apache-mysql-php/comment-page-1/#comments 编译安装: 首先卸 ...
Parencodings(imitate)
Parencodings Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20679 Accepted: 12436 De ...
对Excel文件的操作
①.将文件设为“嵌入的资源”,Template修改不灵活:Stream stream=this.GetType().Assembly.GetManifestResourceStream(Templat ...
MYSQL 删除字段值为NULL的语法
2014年9月1日 15:11:05 delete form your_table where your_field is null and your_field1 = '123' ...
PHP exit() 输出
2014年8月6日 10:41:00 exit($a); 当$a是bool类型,整形的时候,浏览器里是看不到任何输出的当$a是字符串的时候浏览器里是可以看到输出的 $a = 1; exit($a); ...
MinGW/MSYS 交叉编译环境搭建
因为包的依赖关系不清楚,搭建时出错也不知道是什么原因,下面链接老外写的搭建步骤,写的非常详细还有脚本已经编译的下载地址 http://ingar.satgnu.net/devenv/mingw32/ ...
mongodb数据结构学习1--增删改查
插入文档在数据库中,数据插入是最基本的操作,在MongoDB使用db.collection.insert(document)语句来插入文档: document是文档数据,collection是存放文 ...

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

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

随机推荐

热门专题