DOM2练习
左右互相输入
<!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练习的更多相关文章
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- 译:DOM2中的高级事件处理(转)
17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2) 译自:JavaScript: The Definitive Gu ...
- dom2和dom3
第十二章 DOM2和DOM3 一.DOM变化 1.针对XML命名空间的变化 2.其他方面的变化 二.样式 1.访问元素的样式 .style 1)DOM样 ...
- 12. javacript高级程序设计-DOM2和DOM3
1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML ...
- W3C对DOM2.0定义的标准事件
DOM2.0模型将事件处理流程分为三个阶段: 一.事件捕获阶段, 二.事件目标阶段, 三.事件起泡阶段. 具体如图(图片来源于网络,侵删) 事件捕获:当某个元素触发某个事件(如onclick),顶层对 ...
- DOM--3 DOM核心和DOM2 HTML(3)
核心Element对象 操作Element对象的属性 为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法: getAttribut ...
- DOM--3 DOM核心和DOM2 HTML(2)
核心Node对象 由于继承扩展的关系,DOM中大部分对象会有Node对象的属性和方法,其中包括: nodeName DOM2核心中规定的每种nodeType预期的nodeName值 对象 返回值 El ...
- DOM--3 DOM核心和DOM2 HTML(1)
网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- 读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊
---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
随机推荐
- 201521123082 《Java程序设计》第7周学习总结
201521123082 <Java程序设计>第7周学习总结 标签(空格分隔): Java 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ...
- Vue.js项目模板搭建
前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...
- 移动商城第三篇【搭建Mybatis和Spring环境、编写Dao、Service在Core模块】
Mybatis和Spring环境搭建 由于我们的所编写的dao层.service代码可能前台和后台都需要用到的,因此我们把环境搭建在core模块中 逆向工程 首先,我们要做的就是品牌管理,我们首先来看 ...
- Oracle 修改序列的初始值
Oracle 序列(Sequence)主要用于生成主键.但是,有时需要修改序列初始值(START WITH)时,好多人凭感觉认为:Alter Sequence SequenceName Start W ...
- Python学习笔记007_图形用户界面[EasyGui][Tkinter]
EasyGui官网:http://easygui.sourceforge.net/ EasyGui最新版:easygui-0.97.rar 小甲鱼根据官网文档翻译之后的中文文档地址: http://b ...
- Linux 环境下 MySQ导入和导出MySQL的sql文件
将服务器上的文件导入或导出还需要使用工具传输到本机中,推荐使用winscp,与xshell搭配使用 1 导入数据库 两种方法 .首先建空数据库 mysql>create database abc ...
- Java对象克隆详解
原文:http://www.cnblogs.com/Qian123/p/5710533.html 假如说你想复制一个简单变量.很简单: int apples = 5; int pears = appl ...
- oracle数据中记录被另一个用户锁住
原因:PL/SQL里面执行语句执行了很久都没有结果,于是中断执行,于是就直接在上面改字段,在点打钩(记入改变)的时候提示,记录被另一个用户锁住. 解决方法: 第一步:(只是用于查看哪些表被锁住,真正有 ...
- ThinkPHP中:RBAC权限控制的实习步骤
使用版本ThinkPHP3.1.3 第一步,建表及数据 第二步,建关联模型 第三步,控制器使用关联模型.配置文件 第四步,模板显示数据 第一步,建表及数据 在数据库中,建立一个companysvn数据 ...
- SYSTEM_INFO
SYSTEM_INFO结构体包含了当前计算机的信息.这个信息包括计算机的体系结构.中央处理器的类型.系统中中央处理器的数量.页面的大小以及其他信息. SYSTEM_INFO,Win32 API函数Ge ...