左右互相输入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            select{
                width: 60px;
            }
        </style>
    </head>
    <body>
        <select id="s1" size="7" multiple="multiple">
            <option>123</option>
            <option>456</option>
            <option>789</option>
        </select>
        <input type="button" value="向 右" id="btn-r" />
        <input type="button" value="向 左" id="btn-l" />
        <select id="s2" size="7" multiple="multiple">
            <option>abc</option>
            <option>xyz</option>
            <option>ijk</option>
        </select>
        
    </body>
</html>
<script>
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    var btn_r = document.getElementById("btn-r");
    var btn_l = document.getElementById("btn-l");
  
        btn_r.onclick = function(){
            s2.appendChild(s1.selectedOptions[0]);
        }
   
 
        btn_l.onclick = function(){
            s1.appendChild(s2.selectedOptions[0]);
        }
   
</script>

可多项选择左右互取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            select{
                width: 60px;
            }
        </style>
    </head>
    <body>
        <select id="s1" size="7" multiple="multiple">
            <option>123</option>
            <option>456</option>
            <option>789</option>
        </select>
        <input type="button" value="向 右" id="btn-r" />
        <input type="button" value="向 左" id="btn-l" />
        <select id="s2" size="7" multiple="multiple">
            <option>abc</option>
            <option>xyz</option>
            <option>ijk</option>
        </select>
        
    </body>
</html>
<script>
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    var btn_r = document.getElementById("btn-r");
    var btn_l = document.getElementById("btn-l");
    
        btn_r.onclick = function(){
            for(var a = 0;true;a++){
            s2.appendChild(s1.selectedOptions[0]);
            }
        }
    
    
        btn_l.onclick = function(){
            for(var b = 0;true;b++){
            s1.appendChild(s2.selectedOptions[0]);
            }
        }
    
</script>

DOM2练习的更多相关文章

  1. DOM0,DOM2,DOM3 事件基础知识

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  2. 译：DOM2中的高级事件处理（转）

    17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2)        译自:JavaScript: The Definitive Gu ...

  3. dom2和dom3

    第十二章 DOM2和DOM3 一.DOM变化 1.针对XML命名空间的变化 2.其他方面的变化 二.样式 1.访问元素的样式             .style             1)DOM样 ...

  4. 12. javacript高级程序设计-DOM2和DOM3

    1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML ...

  5. W3C对DOM2.0定义的标准事件

    DOM2.0模型将事件处理流程分为三个阶段: 一.事件捕获阶段, 二.事件目标阶段, 三.事件起泡阶段. 具体如图(图片来源于网络,侵删) 事件捕获:当某个元素触发某个事件(如onclick),顶层对 ...

  6. DOM--3 DOM核心和DOM2 HTML(3)

    核心Element对象 操作Element对象的属性 为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法: getAttribut ...

  7. DOM--3 DOM核心和DOM2 HTML(2)

    核心Node对象 由于继承扩展的关系,DOM中大部分对象会有Node对象的属性和方法,其中包括: nodeName DOM2核心中规定的每种nodeType预期的nodeName值 对象 返回值 El ...

  8. DOM--3 DOM核心和DOM2 HTML(1)

    网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...

  9. DOM0,DOM2,DOM3事件,事件基础知识入门

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  10. 读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊

    ---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. 201521123101 《Java程序设计》第1周学习总结

    1. 本周学习总结 在学习Java之前要做好准备工作,了解Java从研发后开始如何一步步完善,其与C++.C语言的异同,然后下载JDK.Eclipse.Notepad等软件,以便于未来的学习. 2. ...

  2. Java 第十四周总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 2. 使用JDBC连接数据库与Statement 2.1 使用Statement操作数据库.(粘贴一段你认为比较有价值的代码,出现学 ...

  3. 201521123122 《java程序设计》第十三周学习总结

    ## 201521123122 <java程序设计>第十三周实验总结 ## 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1 ...

  4. foreach_and_函数

    foreach(对集合每个元素的引用 in 集合){}例: int[] a = new int[5]{1,2,3,4,5,}; foreach(int b in a) { //b就是a中的每个元素 } ...

  5. Eclipse rap 富客户端开发总结(11) ： rcp/rap与spring ibatis集成

    1． rcp/rap 与 spring 集成 Activator 是rcp/rap 启动时需要加载的类, 只需要加载一遍,所以与spring 集成的时候一般是在这个类里面加载spring 的Appli ...

  6. 王者荣耀是怎样炼成的（二）《王者荣耀》unity安装及使用的小白零基础入门

    转载请注明出处:http://www.cnblogs.com/yuxiuyan/p/7535345.html 工欲善其事,必先利其器. 上回书说到,开发游戏用到unity和C#.本篇博客将从零开始做一 ...

  7. 监听器第一篇【基本概念、Servlet各个监听器】

    什么是监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 为什么我们要使用监听器 ...

  8. PolarDB · 新品介绍 · 深入了解阿里云新一代产品 PolarDB

    背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...

  9. MapReduce执行过程

    Mapper任务的执行过程: 第一阶段是把输入文件按照一定的标准分片(InputSplit),每个输入片的大小是固定的.默认情况下,输入片(InputSplit)的大小与数据块(Block)的大小是相 ...

  10. 树状数组初步_ZERO

    原博客:树状数组 1 一维树状数组 1 什么是树状数组        树状数组是一个查询和修改复杂度都为log(n)的数据结构,假设数组A[1..n],那么查询A[1]+-+A[n]的时,间是log级 ...