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: ...
随机推荐
- 结对编程1 —— 基于GUI和Swing的四则运算题目生成器
合作伙伴 201421123102 王艳秋 201421123106 陈 雄 代码地址 题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI( ...
- 201521123113《Java程序设计》第8周学习总结
1. 本周学习总结 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 remove函数中,开始我的写法是 for(int i=0;i<list.s ...
- java第一次作业0
lsl321 java第一次作业 #1. 本章学习总结 你对于本章知识的学习总结 本章我们学习了各种java相关文件的使用,以及码云,博客,pat等程序辅助软件,这些对于我们专业的学习有非常大的帮助, ...
- JSP学习（一）之中文乱码问题的解决
一.响应中的乱码 我们所看到的页面,是由服务器把内容放入响应(response)中,然后发送给浏览器的.如果响应中的数据无法被正常解析,就会出现中文乱码.为什么英文不存在乱码问题?因为无论是ISO-8 ...
- 201521123007《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- 201521123080《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...
- 201521123106 《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...
- 201521123028 《Java程序设计》第10周学习总结
1. 本周学习总结 异常方面,主要是调试的相关内容,断点的使用,常用快捷键(F5(step into) F6(step over,跳过),F7 (step return,跳出)). 多线程: ①.进程 ...
- 201521123030 《Java程序设计》 第10周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 在fi ...
- mysql数据库-中文乱码问题解决方案
来自:http://www.2cto.com/database/201108/101151.html MySQL会出现中文乱码的原因不外乎下列几点: .server本身设定问题,例如还停留在latin ...