<!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. 前端面试题常考&必考之--用jquery写出当前元素的同辈元素的第二个结点的value值

    问题:用jquery写出当前元素的同辈元素的第二个结点的value值??? 分析:该题目有一个坑,那就是,如果当前元素没有第二个兄弟结点呢(坑坑坑) 解析: 一般我们可能会这样写: $(this).s ...

  2. HDU 6205 card card card ( 思维 )

    题意 : 给定两个序列 a 和 b ,保证 a 数列的和 == b数列的和,从头到尾考虑 (a[i] - b[i]) 的前缀和,直到前缀和为负数则无法进行下去,所得的便是a[1~i]的和,现在有一个操 ...

  3. Java异常处理的基础知识

    Java中的异常捕获语句 Try{ //可能发生运行错误的代码: } catch(异常类型 异常对象引用){ //用于处理异常的代码 } finally{ //用于“善后” 的代码 } Java 中所 ...

  4. hashcode native

    hashcode Java中的hashCode方法就是根据一定的规则将与对象相关的信息(比如对象的存储地址,对象的字段等)映射成一个数值,这个数值称作为散列值. 在设计hashCode方法和equal ...

  5. 力扣60——第k个排列

    原题 给出集合 [1,2,3,-,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: 1. "123" 2. &qu ...

  6. Java网络编程与NIO详解11：Tomcat中的Connector源码分析（NIO）

    本文转载 https://www.javadoop.com 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.c ...

  7. python条件判断之直接加数字

    if 后面跟的是条件表达式,条件表达式的结果为True或者False. (1)如果if后面的条件是数字,只要这个数字不是0,python都会把它当做True处理,见下面的例子: if 3: print ...

  8. Apache2.4常用编译参数

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

  9. Flask框架【七】—session组件详解

    一.flask session简介 flask中session组件可分为内置的session组件还有第三方flask-session组件,内置的session组件缺点: 功能单一 session是保存 ...

  10. dropna()函数

    参数: axis:       default 0指行,1为列 how:       {‘any’, ‘all’}, default ‘any’指带缺失值的所有行;'all’指清除全是缺失值的 thr ...