左右互相输入

<!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. 转：【Java集合源码剖析】HashMap源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/36034955   您好,我正在参加CSDN博文大赛,如果您喜欢我的文章,希望您能帮我投一票 ...

  2. 软件工程（GZSD2015）第二次作业小结

    第二次作业,从4月7号开始,陆续开始提交作业.根据同学们提交的作业报告,相比第一次作业,已经有了巨大改变,大家开始有了完整的实践,对那些抽象的名词也开始有了直观的感受,这很好.然后有一些普遍存在的问题 ...

  3. 201521123090《Java程序设计》第6周学习总结

    本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面向对 ...

  4. 学号：201521123116 《java程序设计》第二周学习总结

    1. 本章学习总结 一:学习了string的类型,string的对象是不可变的,创建之后不能再修改 二:SET PATH/CLASSPATH和-cp的用法. 三:学习了Java API 文档的使用方法 ...

  5. self、parent和$this关键字

    self.parent和$this关键字的区别: self关键字用来指定当前的类,而且该关键字通常用来访问类的静态成员.方法和常量.parent关键字用于指向父类,所以使用该关键字调用父类的属性和方法 ...

  6. while循环_do_while循环_switch

    swith语法: switch(值) { case 值1: 语句 break; case 值2: 语句 break; case 值3: 语句 break; default: break; } 1.值与 ...

  7. Q：哪里可以注册hk域名？A：这里！这里！(小白绢挥手）

    注意!前方有一条比你妈手中的竹板还硬的推文出没······ 咳咳,清清喉咙,预备唱! (请自动代入甜蜜蜜的曲调) 甜蜜蜜你笑的甜蜜蜜  好像花儿开在春风里  开在春风里 在哪里在哪里见过你  .HK域 ...

  8. 如何查看maven plugin所包含的goal

    maven项目的构建生命周期(build lifecycle)由很多阶段组成:从validate到deploy. maven插件中包含goal.这些goal可以被绑定到不同的maven的构建阶段上.g ...

  9. Excel 若某列包含某个字符则特定列显示特定字符

    今天在写Excel , 有很多重复的数据, 在想 如果 可以像Java  一样 筛选就好了 这样的效果 if ("adj".equals(sheet1.A1)){ sheet1.B ...

  10. 改用Struts2.5 出现404 错误

    这个是因为现在Struts 使用  2.5   只需要8 个 jar 包 Xworks-core 已经加到 struts-core中了 原因 是  Jar 包 冲突  导致 的    其次 如果 使用 ...