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

代码如下所示：

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. H5学习小结——div+css创建电子商务静态网页

    使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...

  2. c# 集合及特殊集合

    1.ArrayList集合 习题:输入人数,输入分数,存到集合里面,之后再读取出来,求平均分,排序打印. 2.Stack 集合 3.Queue    队列集合 每日一语:脚跟立定以后,你必须拿你的力量 ...

  3. iis上json解析失败404

    控制面板->打开或关闭windows功能->Internet信息服务->万维网服务->应用程序开发功能,勾选上“.net扩展性”和“ASP.NET”,保存后,重启IIS服务器. ...

  4. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  5. bootstrap 不兼容ie8 的问题

    官方推荐的脚手架中,其实已经包含着解决方案:html5shiv.min.js .Respond.min.js 但由于respond.js  使用 file:// 协议,IE8 是无法调起本地文件的   ...

  6. phpexcel的写操作将数据库中的数据导入到excel中

    这个版本据说是可以支持excel2007,但是我使用2007编辑的xlsx是无法获得该库的支持.于是乎我就将它转化为2003.感觉支持地很好. 下面介绍一下具体的使用: require_once('. ...

  7. BizTalk动手实验（三）BizTalk开发综合实验

    1 课程简介 通过本课程熟悉BizTalk开发组件Schema/Map/Orchestration/Pipeline的开发与配置 2 准备工作 3 演示 3.1 创建与配置BizTalk应用程序 1. ...

  8. 从客户端中检测到有潜在危险的 request.form值[解决方法]

    当页面编辑或运行提交时,出现“从客户端中检测到有潜在危险的request.form值”问题,该怎么办呢?如下图所示: 下面博主汇总出现这种错误的几种解决方法:问题原因:由于在asp.net中,Requ ...

  9. php课程---练习（联系人信息表）

    做一个联系人表,实现增删改功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  10. 为Docker容器指定自定义网段的固定IP/静态IP地址

    第一步:创建自定义网络 备注:这里选取了172.172.0.0网段,也可以指定其他任意空闲的网段 docker network create --subnet=172.172.0.0/16 docke ...