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

代码如下所示：

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. Jquery 捕捉页面关闭事件

    (http://www.php100.com/html/program/jquery/2013/0905/6052.html) $(window).bind('beforeunload',functi ...

  2. SQL server while语句、存储过程

    1.循环语句 2.存储过程 存储过程(stored procedure)有时也称为sproc.存储过程存储于数据库中而不是在单独的文件中,有输入参数.输出参数以及返回值等. 3.四种存储过程类型(类似 ...

  3. HTTP协议 (四) 缓存

    HTTP协议 (四) 缓存 阅读目录 缓存的概念 缓存的好处 Fiddler可以方便地查看缓存的header 如何判断缓存新鲜度 通过最后修改时间,判断缓存新鲜度 与缓存相关的header ETag ...

  4. bug1

    1从相册中获取图片,低版本可以,高版本不行.看见抛出 Bitmap too large to be uploaded into a texture 原来是高版本的android,机子好点,相机就好点, ...

  5. 关于格式转换 “%a.bs”

    这个形式的格式转换符用于输出, 如果a <= b,  那么输出的字符串串长大于等于a, 小于b; 否则, 输出的串长按照a指定的输出. (不够,用空格补齐)

  6. Struts2的流程（三）

    Struts的流程图如下(需要完全理解):

  7. Empire C：Basic 2

    作为人与计算机沟通的媒介,C语言给我们呈现了:printf.scanf.以及缓冲区. 1.printf("%d",a) %d:d是decimal base(十进制)的开头字母,意思 ...

  8. JQuery-属性

    // attr能访问到的都是html里面的样式,诸如内联样式.外部样式和外联样式该方法访问不到 $('#div1').width('400px') // 这个用来改样式css $("#div ...

  9. Summary of Mac Versions

    1.在 submit 的过程被 cancel 掉,可能会出现某些文件被 lock 住导致没办法再重新 update and commit. 解决方法: a) Memu."Action&quo ...

  10. DOM9大节点

    ELEMENT_NODE 1 元素节点 常用 ATTRIBUTE_NODE 2 属性节点 常用 TEXT_NODE 3 文本节点 常用 CDATA_SECTION_NODE 4 CDATA区段   E ...