<!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. luogu 2219[HAOI2007]修筑绿化带 单调队列

    Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in",& ...

  2. Activiti的分配任务负责人(八)

    1分配任务负责人 1.1 固定分配 在进行业务流程建模时指定固定的任务负责人 在 properties 视图中,填写 Assignee 项为任务负责人.注意事项由于固定分配方式,任务只管一步一步执行任 ...

  3. ACM 求全排列（字典序、邻位对换、递增进位制数，递减进位制数）

    字典序:(联合康托展开就也可以按照中介数求) 邻位对换.递增进位制数,递减进位制数:具体的实现和算法讲解如下: 代码..C++版的实现并不好..因为是挨个向后找的,如果K很大的时候会超时,不过...思 ...

  4. Leetcode 11. Container With Most Water(逼近法)

    11. Container With Most Water Medium Given n non-negative integers a1, a2, ..., an , where each repr ...

  5. H. The Game of Life

    题目链接:http://exam.upc.edu.cn/problem.php?id=5206 题意:邻居为八个方向.若一个活人有2或3个邻居,遗传一代,否则死亡:若一个死人有3个邻居,则下一代复活. ...

  6. 冲刺周—The First Day

    一.FirstDay照片 二.项目分工 三.今日份燃尽图 四.项目进展 码云团队协同环境构建完毕 利用Leangoo制作任务分工及生成燃尽图 完成AES加解密部分代码 五.问题与困难 1.AES加解密 ...

  7. 移动端轮播完整版css3加原生写法

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  8. tab下图表展示宽高为0的问题

    tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...

  9. benchmarks

    系统性能测试 stream SPARK 测试 streaming benchmark https://github.com/yahoo/streaming-benchmarks

  10. mysql group by 去重 分类 求和

    w SELECT COUNT(*) FROM ( SELECT COUNT(*) FROM listing_vary_asins GROUP BY asin, countrycode ) AS w; ...