左右互相输入

<!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. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  2. 团队作业8——第二次项目冲刺（Beta阶段）Day4--5.21

    展开圆桌式会议: 会议内容:1.团队成员对昨天任务完成情况做一个简单交流,并对昨天工作中存在的问题提出集中讨论解决:2.按照昨天的昨天工作分配表做具体的任务分配:3.简单讨论明天的任务分配每个人的工作 ...

  3. 201521123004《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 本周主要内容为: 继承:extends 抽取共同特征(行为与属性) 复用代码 继承时子类将获 ...

  4. 201521123096《Java程序设计》第一周学习总结

    1. 本章学习总结: 对JAVA的发展有一定的了解.JAVA是一种高级语言,需要在JVM上执行.初步学会使用eclipse和NOtepad++. 2. 书面作业 Q1:为什么java程序可以跨平台运行 ...

  5. Hyperledger Fabric 1.0 从零开始（三）——环境构建（内网/准离线）

    有公网环境的服务器可以直接看 Hyperledger Fabric 1.0 从零开始(二)--环境构建(公网) ,本篇内容与上篇相似,只不过环境搭建需要在内网下,也就是网络被限制的情况下. 1:环境构 ...

  6. js的原型

    在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是 ...

  7. python基础之socket

    一.osi七层 完整的计算机系统由硬件,操作系统,软件组成. 互联网的核心就是由一堆协议组成,协议就是标准,如全世界通信的标准就是英语. 如果把计算机比作人,那么互联网协议就是计算机界的英语,所有计算 ...

  8. Oracle-一个中文汉字占几个字节?

    Oracle 一个中文汉字占用几个字节 Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定!!! 1. 如果定义为VARCHAR2(32 CHAR),那么该列最多就可以存储3 ...

  9. mybatis-分页显示数据

    分页用到的两个实体类 package com.yangwei.shop.entity; /** * 注意 get,set,remove 方法与一般的实体类的不同*/ public class Syst ...

  10. sql server 把数据 复制成脚本文件

    问题描述:想把一个数据库里的表和字段复制到另一个数据库里: 方法一:a.生成脚本文件 选择数据库右键->任务->生成脚本: b. 选择特定的数据库对象->下一步: c.高级-> ...