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

代码如下所示：

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. asp.net自定义404页面

    网上有很多方法,不过大体相同,这只是其中一个方法,亲测有效,记录后面可能会有用 1. 先写好一个404页面 404.aspx在项目根目录下 然后在配置文件中添加 <!-- 注意这个模式,redi ...

  2. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  3. HTML中id、name、class 区别

    参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...

  4. Matlab里面的SVM

    支持向量机是建立在统计学习理论基础之上的新一代机器学习算法,支持向量机的优势主要体现在解决线性不可分问题,它通过引入核函数,巧妙地解决了在高维空间中的内积运算,从而很好地解决了非线性分类问题. 构造出 ...

  5. IOS第18天(9,核心动画-动画组）

    ****动画组 // 核心动画都是假象,不能改变layer的真实属性的值// 展示的位置和实际的位置不同.实际位置永远在最开始位置 #import "HMViewController.h&q ...

  6. POJ 1986 Distance Queries（Tarjan离线法求LCA）

    Distance Queries Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 12846   Accepted: 4552 ...

  7. iOS CAShapeLayer记录

    基本知识 看看官方说明: /* The shape layer draws a cubic Bezier spline in its coordinate space. * * The spline ...

  8. [LeetCode]题解（python）：113 Path Sum II

    题目来源 https://leetcode.com/problems/path-sum-ii/ Given a binary tree and a sum, find all root-to-leaf ...

  9. eNSP的使用

    1- 进入华为路由器界面配置ipThe device is running!####################################Nov  1 2016 23:39:24-08:00 ...

  10. Windwos服务器远程桌面不能复制粘贴的解决方法

    今天使用远程桌面连接登陆服务器,发现不能在本地电脑和远程服务器之间复制粘贴文件了,复制粘贴文本也不行. 网上搜了一下,主要有两种情况: 1.复制粘贴功能原本可以用,突然失灵了2.从头到尾都无法使用这个 ...