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: ...
随机推荐
- 201521123083《Java程序设计》第8周学习总结
1. 本周学习总结 这周因为一些事情耽搁了,几乎没什么打java代码,这几天尽量补过来 2. 书面作业 1.List中指定元素的删除 1.1 实验总结 不贴大段代码了,简要总结一下.切割成数组,主要用 ...
- 第二次项目冲刺(Beta阶段)--第二天
一.站立式会议照片 二.项目燃尽图 三.项目进展 功能模块的代码编写完成,界面布局规划已经定型,不会有大的修改,接下去就是主要解决存在的bug以及各种测试. 队员 ID 贡献比 王若凡 201421 ...
- 201521123022 《Java程序设计》 第四周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2. 使用常规方法总结其他上课内容. ①instenceof运算符:可通过它判断父类引用对象实例的实际类型,且在父类转化成子类时 ...
- 201521123012 《Java程序设计》第三周学习总结
一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...
- 201521123040《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- 参加IMWebConf 2017 前端开发者大会是什么体验?
周六作为特邀讲师之一参加了IMWebConf 2017 前端开发者大会的主题演讲,主题为<WebAssembly:面向未来的web开发技术>.本次大会质量非常高,来自国内外的技术专家带了很 ...
- Maven第三篇【Maven术语、pom.xml介绍】
maven术语 在我们上一篇中已经知道了在Intellij idea下是如何使用Maven的了,创建出来的目录结构是这样子的: 上面的目录结构就是Maven所谓的"约定",我们使用 ...
- [python学习笔记] 开篇
今天开始学习markdown,立贴为证. 平均一天一小时.两个月先学完基础. 所有的帖子只为了学习记录,有不对的请提出,轻吐槽
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- express 安装和运行
1.npm install -g express-generator 2.进入服务目录(自己定义的文件夹,或者express Myapp && cd Myapp 新建Myapp文件夹并 ...