最终实现的效果如下图所示：

代码如下所示：

HTML代码部分：

 <body>

 <div class="page" style="overflow: hidden">

     <div class="one">所选课程

         <select  size =10 name="" id="left">

             <option value="">javascript</option>

             <option value="">html5</option>

             <option value="">css3</option>

             <option value="">jquery</option>

             <option value="">angular</option>

              <option value="">javascript</option>

             <option value="">html5</option>

             <option value="">css3</option>

             <option value="">jquery</option>

             <option value="">angular</option>

              <option value="">javascript</option>

             <option value="">html5</option>

             <option value="">css3</option>

             <option value="">jquery</option>

             <option value="">angular</option>

              <option value="">javascript</option>

             <option value="">html5</option>

             <option value="">css3</option>

             <option value="">jquery</option>

             <option value="">angular</option>

         </select>

     </div>

     <div class="one"><br><br>

         <button id="rightBtn">右移一项</button>

         <button id="allRightBtn">全部右移</button>

         <button id="leftBtn">左移一项</button>

         <button id="allLeftBtn">全部左移</button>

     </div>

     <div class="one">

         <select size =10 name="" id="right">

             <option value="">web</option>

             <option value="">前端</option>

             <option value="">后端</option>

             <option value="">java</option>

         </select>

     </div>

 </div>

 </body>

CSS代码部分：

     <style>

         select{

             width: 200px;

         }

         .one{

             float: left;

         }

         button{

             display: block;

         }

     </style>

Javascript代码部分：

 <script>

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

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

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

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

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

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

     rightBtn.onclick = function(){

         right.appendChild(left[left.selectedIndex])

     };

     allRightBtn.onclick = function(){

         var len = left.length;

         for(var i= 0;i<len;++i){

             right.appendChild(left[0])

         }

     };

     leftBtn.onclick = function(){

        left.appendChild(right[right.selectedIndex])

     };

     allLeftBtn.onclick = function(){

         var len = right.length;

         for(var i= 0;i<len;++i){

             left.appendChild(right[0])

         }

     }

 </script>

供友友们参考。

利用javascript实现课程选择的更多相关文章

  1. 利用JavaScript选择GridView行

    本篇技巧和诀窍记录的是:利用JavaScript选择GridView行. 当我们想在GridView中添加删除.选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按 ...

  2. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  3. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  4. javascript进阶课程--第二章--对象

    javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...

  5. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  6. 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...

  7. 利用JavaScript函数对字符串进行加密

    加密.解密问题对我来说一直是很神秘的,感到神奇无比. 理论了解 前段时间看到关于利用JavaScript函数unescape()和escape()对字符串进行替换处理.通过查资料得知, escape( ...

  8. javascript文件夹选择框的两种解决方案

    javascript文件夹选择框的两种解决方案 解决方案1:调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它 ...

  9. ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点

    利用JavaScript代码配置ligerTree节点: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: <%@ p ...

随机推荐

  1. java动态编译类文件并加载到内存中

    如果你想在动态编译并加载了class后,能够用hibernate的数据访问接口以面向对象的方式来操作该class类,请参考这篇博文-http://www.cnblogs.com/anai/p/4270 ...

  2. Ubuntu14.04配置记录

    公司配的台式机,新装了ubuntu,记录下配置过程. vim sudo apt-get install vim unzip sudo apt-get install unzip unrar sudo ...

  3. Wcf 双工通信的应用

    概述 双工(Duplex)模式的消息交换方式体现在消息交换过程中,参与的双方均可以向对方发送消息.基于双工MEP消息交换可以看成是多个基本模式下(比如请求-回复模式和单项模式)消息交换的组合.双工ME ...

  4. windows内核 内存管理

    一.几个基本的概念 1.存储器的金字塔结构 存储器从下之上依次是磁盘/flash.DRAM(内存).L2-cache.L1-cache.寄存器,越在上面的存储器访问速度越快,同时价格也越昂贵,每一级都 ...

  5. 使用SharpSSH连接服务器报Algorithm negotiation fail解决办法

    SharpSSH或JSCH使用diffie-hellman-group1-sha1和diffie-hellman-group-exchange-sha1密钥交换算法,而OpenSSH在6.7p1版本之 ...

  6. 关于怎样解决eclipse打开时出现的Failed to load the JNIshared library亲测有效

    之前一直可以正常使用eclipse但是当我装了Oracle后打开后就出现了Failed to load the JNIshared library(下面还出现了一个jvm.dll的文件路径),当时就蒙 ...

  7. NEC学习 ---- 模块 - 左图右文图文列表

    该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...

  8. Portable Operating System Interface for uni-X

    https://kb.iu.edu/d/agjv Short for "Portable Operating System Interface for uni-X", POSIX ...

  9. SQLSERVER20008 完整备份和差异备份

    --差异备份 DIFFERENTIAL ) ),)+'.bak' BACKUP DATABASE [testbackup] TO DISK=@name WITH DIFFERENTIAL, NOFOR ...

  10. Unit03 - 对象内存管理 、 继承的意义（上）

    Unit03 - 对象内存管理 . 继承的意义(上) 1.内存管理:由JVM来管理的  1)堆:    1.1)存储所有new出来的对象(包含成员变量)    1.2)没有任何引用所指向的对象就是垃圾 ...