<!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. 使用HTML和CSS来实现为文字设置图片底纹

    先看一下最终实现的效果 图中的hello是文本而不是图片 那么如何实现这种效果呢? HTML部分: 创建一个h1标签 ,标签内容为(hello).通过link标签链接外部样式表style.css. s ...

  2. Java使用google身份验证器实现动态口令验证

    参考: 1)https://www.jb51.net/article/121243.htm 2)https://www.cnblogs.com/wuaili/p/9810661.html

  3. R 大小写转换

    >x = "CAGTTTCTTGAGTCTGATTAATTCAGGTTTCGGGGT"#定义字符串变量x>tolower(x)[1] "cagtttcttga ...

  4. php开发IDE选择

    优先选择Netbeans,理由如下:: 1.ZendStudio有的方便特性Netbeans也提供,如:ctrl+f5也支持ctrl+shift+r的文件选择功能,[git | svn]团队代码管理. ...

  5. 二、angular7的基础知识学习

    <p> hello works </p> <div *ngIf="isShow">我是测试内容</div> <p> &l ...

  6. FCC成都社区·前端周刊 第 2 期

    01. Propel:JS的科学计算框架 Propel 是一种 JavaScript 科学计算框架,类似于 Python 中的科学计算库 NumPy,也就是说利用 JS 也可以进行机器学习啦.Prop ...

  7. git使用,Git的skil-map，git配置http/https/socks5代理

    . 检出.克隆库: git clone git://git.openwrt.org/openwrt.git 2. git查看某个文件的修改历史 git log --pretty=oneline 文件名 ...

  8. 自定义控件 - 流式布局：TagFlowLayout

    在项目中需要用到流式布局的样式,此文学习鸿洋大神的FlowLayout控件,学习使用一下.出自 http://blog.csdn.net/lmj623565791/article/details/38 ...

  9. JS 引擎

    最早的 JS 引擎是纯解释器,现代 JS 引擎已经使用 JIT(Just-in-time compilation:结合预编译(ahead-of-time compilation AOT)和解释器的优点 ...

  10. PHP密码和token

    密码 直接md5和sha1不安全!!! crypt()和hash_equals(): http://php.net/manual/zh/function.crypt.php <?php // c ...