<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

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

         <style type="text/css">

             div {

                 width: 200px;

                 float: left;

             }

             select {

                 width: 100px;

                 height: 180px;

                 padding: 10px;

             }

         </style>

     </head>

     <body>

         <div>

             <select multiple="multiple" id="leftSel" style="margin-left: 17px;">

                 <option>选项1</option>

                 <option>选项2</option>

                 <option>选项3</option>

                 <option>选项4</option>

                 <option>选项5</option>

                 <option>选项6</option>

                 <option>选项7</option>

                 <option>选项8</option>

                 <option>选项9</option>

                 <option>选项10</option>

             </select>

             <br />

             <input type="button" value="选中添加到右边 ->" onclick="choiceToRight()">

             <br />

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

         </div>

         <div>

             <select multiple="multiple" id="rightSel" style="margin-left: 17px;"></select>

             <br />

             <input type="button" value="<- 选中添加到左边" onclick="choiceToLeft()">

             <br />

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

         </div>

         <script type="text/javascript">

             // 获取select

             var leftSel = document.getElementById("leftSel");

             var rightSel = document.getElementById("rightSel");

             // 选中添加到右边

             function choiceToRight() {

                 toSel(leftSel, rightSel, true);

             }

             // 全部添加到右边

             function allToRight() {

                 toSel(leftSel, rightSel, false);

             }

             // 选中添加到左边

             function choiceToLeft() {

                 toSel(rightSel, leftSel, true);

             }

             // 全部添加到左边

             function allToLeft() {

                 toSel(rightSel, leftSel, false);

             }

             // 如果flag为true，就是选中添加，如果为false，就是全部添加

             function toSel(fromSel, toSel, flag) {

                 var subSel = fromSel.getElementsByTagName("option");

                 if (flag) {

                     for (var i = 0; i < subSel.length; i++) {

                         if (subSel[i].selected) {

                             toSel.appendChild(subSel[i]);

                             // 因为subSel的length每次会-1，所以让i归零，保证每次for循环都能被执行到

                             i--;

                         }

                     }

                 } else {

                     for (var i = 0; i < subSel.length; i++) {

                         toSel.appendChild(subSel[i]);

                         i--;

                     }

                 }

             }

         </script>

     </body>

 </html>

JavaScript基础2——下拉列表左右选择的更多相关文章

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

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

  2. 【JavaWeb】JavaScript 基础

    JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  5. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  6. javascript基础语法——词法结构

    × 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...

  7. JavaScript基础插曲—元素样式，正则表达式，全局模式，提取数组

    JavaScript基础学习 学习js的基础很重要,可以让自己有更多的技能.我相信这个以后就会用到. Eg:点击选择框,在div中显示出选择的数量 window.onload = function() ...

  8. JavaScript基础—插曲

    Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...

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

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

随机推荐

  1. Python3 三元表达式、列表推导式、生成器表达式

    Python3 三元表达式.列表推导式.生成器表达式 三元表达式 表达式中,有三个元素 name = input("请输入姓名: ")ret = '输入正确' if name == ...

  2. mysql FULL JOIN关键字 语法

    mysql FULL JOIN关键字 语法 作用:只要其中某个表存在匹配,FULL JOIN 关键字就会返回行.“富瑞华”牌大理石构件 语法:SELECT column_name(s) FROM ta ...

  3. luogu P1125 笨小猴 x

    P1125 笨小猴 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设max ...

  4. 【BZOJ5092】分割序列（高维前缀和）

    题意:对于一个长度为n的非负整数序列b_1,b_2,...,b_n, 定义这个序列的能量为:f(b)=max{i=0,1,...,n}((b_1 xor b_2 xor...xor b_i)+(b_{ ...

  5. OpenCV feature2d

    /*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...

  6. 170815-关于Filter的知识点

    Filter简介:         Filter翻译为中文是过滤器的意思.         Filter是JavaWeb的三大web组件之一:Servlet.Filter.Listener       ...

  7. [CSP-S模拟测试]:飘雪圣域（莫队）

    题目描述 $IcePrincess\text{_}1968$和$IcePrince\text{_}1968$长大了,他们开始协助国王$IceKing\text{_}1968$管理国内事物. $IceP ...

  8. Springboot-H2DB

    为什么在Springboot中用H2DB 用Springboot开发需要连接数据库的程序的时候,使用H2DB作为内存数据库可以很方便的调试程序. 怎么用 1.加入依赖 <dependency&g ...

  9. webstorm tools window

    webstorm左侧的文件列表不见了, 通过菜单,view-->tools window-->project window就可以找到

  10. Apache2.4常用编译参数

    转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...