<!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. 题解 P1433 【吃奶酪】

    这道题是一道著名的NP问题. 正解应该是DP,但我在这里讲一种近似算法--爬山. 希望某些dalao注意一下爬山与模拟退火的区别. 爬山是直往低处往高处爬,每次取大的,也就是一种贪心思想. 而模拟退火 ...

  2. 【CF1249D】Too Many Segments（贪心，set，vector）

    题意:给定n条线段和覆盖上限k,每条线段都覆盖了区间内的整点 问最少删掉几条线段能使所有的整点都被覆盖不超过k次 k<=n<=2e5,l[i],r[i]<=2e5 思路:比赛时候不会 ...

  3. #1122 JSP动作元素

    JSP动作元素 与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用JSP动作可以动态地插入文件.重用JavaBean组件.把用户重定向到另外的页面 ...

  4. BootStrap 用法

    1 下载bootstrap组件 2  在jsp页面中加入bootstrap <link rel="stylesheet" type="text/css" ...

  5. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  6. java中的 sleep() 和 wait() 有什么区别？

    1.每个对象都有一个锁来控制同步访问,Synchronized关键字可以和对象的锁交互,来实现同步方法或同步块.sleep()方法正在执行的线程主动让出CPU(然后CPU就可以去执行其他任务),在sl ...

  7. grep的用法,小技巧,模板中含有\t时：grep -P "^\t" file

    linux中grep和find的用法区别 本文章详细的介绍了关于在linux中的grep和find两个命令的用法介绍,以及后面总结了它们两年用法区别哦. 先我们来介绍一下关于grep用法和一些小注意事 ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第3节 Random类_9-生成指定范围的随机数

    左闭右开区间

  9. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第5节 线程池_1_线程池的概念和原理

    线程的底层原理 集合有很多种,线程池的集合用LinkedList最好

  10. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_4_File类的构造方法

    学习一个类先学习构造方法和静态方法 重写了Object类的toString方法 文件夹结尾 相对路径 第二个构造方法 两个路径组装到了一起 加上双斜线 换成d盘 第三个构造 第一个参数是一个File对 ...