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

代码如下所示：

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. redis集群搭建

    1.  Redis Cluster的架构图.            (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群 ...

  2. 导出查询结果到excle

    实现功能 输入查询结果 点击导出查询结果 导出到excle表.

  3. zju(6)中断控制实验

    1.实验目的 1.学习和掌握Linux下中断驱动的写法: 二.实验内容 1．编写EduKit-IV实验箱Linux操作系统下按键key的驱动: 2．编写EduKit-IV实验箱Linux操作系统下按键 ...

  4. CCF认证(1)

    #include <iostream> #include <windows.h> using namespace std; typedef struct letter{ int ...

  5. vue 倒计时

    简单粗暴 export default { data () { return { timer: 30, //默认倒数30秒 stop : false, //默认是停止的,但界面加载之后会变成false ...

  6. 会场安排问题---nyoj14

    描述学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工作就是安排学校小礼堂的活动,每个时间最多安排一个活动.现在小刘有一些活动计划的时间表,他想尽 ...

  7. Hash Table 的实现步骤是什么

    什么是HashTable Hash Table 是计算机科学中很重要的一种数据结构,其时间复杂度为O(1),主要是通过把关键字Key 映射到数组中的一个位置来访问记录,所以速度相当快.映射函数称为 H ...

  8. 大量查询SQL语句 实例

    1.查看表结构语句:DESC   表名   2.查询所有列:select  *  from  表名   3.查询指定列:select  字段名  form  表名   4.查询指定行:SELECT * ...

  9. larave5.1l队列

    官方文档http://laravel.com/docs/5.1/queues#dealing-with-failed-jobs 1.队列容器设置为数据库 config/queue.php 'defau ...

  10. zepto源码--核心方法7（管理包装集）--学习笔记

    后面应该会有几篇连续介绍关于zepto包装集的文章.涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法.prev, next, first, last, siblings, eq pre ...