9月23日JavaScript作业----两个列表之间移动数据
作业一:两个列表之间数据从一个列表移动到另一个列表
<div style="width:600px; height:500px; margin-top:20px">
<div style="width:200px; height:300px; float:left">
<select id="list1" size="10" style="width:200px; height:300px">
<option>山东</option>
<option>北京</option>
<option>河北</option>
<option>黑龙江</option>
<option>河南</option>
</select>
</div>
<div style="width:80px; height:300px; float:left">
<input type="button" value="单移" id="btn1" style="width:70px; height:30px" onclick="Dan()"/>
<input type="button" value="全移" id="btn2" style="width:70px; height:30px" onclick="Duo()"/>
</div>
<div style="width:200px; height:300px; float:left">
<select id="list2" size="10" style="width:200px; height:300px"></select>
</div>
</div> function Dan()
{
var list1 = document.getElementById("list1"); //把列表1选中值取出
var v = list1.value;
var s = "<option class='o2'>"+v+"</option>"; //造一个option项
var attr = document.getElementsByClassName("o2"); //把造的option项放在一个数组里面。
var cz = true;//默认是true
for(var i=0;i<attr.length;i++)
{
if(attr[i].innerHTML==v) //判断右侧列表里是否有重复的
{
cz = false;
break;
}
} if(cz)
{
var list2 = document.getElementById("list2"); // 将option项扔到list2
list2.innerHTML +=s;//在列表2添加上
}
}
function Duo()
{
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML; 直接复制列表选项
}
9月23日JavaScript作业----两个列表之间移动数据的更多相关文章
- 9月23日JavaScript作业----日期时间选择
作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...
- 9月23日JavaScript作业----子菜单下拉
例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...
- 9月23日JavaScript作业----用DIV做下拉列表
例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...
- 5月23日 JavaScript
一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...
- 5月23日 JavaScript练习:累加求和
第一种方法: 第二种方法:
- java script两个列表之间移动数据
<select name="b1" id="hao" style="width:100px; height:200px;" size= ...
- Week16(12月23日):复习
Part I:提问 =========================== 1.声明强类型视图时,使用关键字( ) A.ViewBag B.model C.Type D.Tit ...
- 2016年6月23日 星期四 --出埃及记 Exodus 14:20
2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...
- 北京Uber优步司机奖励政策(11月23日~11月29日)
用户组:人民优步"关羽组"(适用于11月23日-11月29日)奖励政策: 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最 ...
随机推荐
- 1031MySQL事务隔离级别详解
转自http://xm-king.iteye.com/blog/770721 SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的.低级别的隔离级一般支 ...
- jsp内置对象作业1-用户登录
题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...
- java-a实现压缩与解压缩(zip、gzip)
zip扮演着归档和压缩两个角色:gzip并不将文件归档,仅只是对单个文件进行压缩,所以,在UNIX平台上,命令tar通常用来创建一个档案文件,然后命令gzip来将档案文件压缩. Java I/O类库还 ...
- 【收藏】Android屏幕适配全攻略(最权威的Google官方适配指导)
来源:http://blog.csdn.net/zhaokaiqiang1992 更多:Android AutoLayout全新的适配方式, 堪称适配终结者 Android的屏幕适配一直以来都在折磨着 ...
- JavaScript结构三层——思想快速入门
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...
- 使用触发器实现记录oracle用户登录失败信息到alert.log日志文件
前面我们说了用oracle自带的审计功能可以实现记录用户登录失败日志到数据表中(链接:http://www.54ok.cn/6778.html).今天我们来分享一下如何把用户登录失败信息记录到aler ...
- Redis哈希-hash
Redis的hash类型数据存储极为重要 hset K V 赋值一个hash 其中V为 (key, value) 127.0.0.1:6379> hset user id 1(integer) ...
- [学习笔记]lca-倍增
The article is to Jimmy.(方老师讲过了还不会,想怎样???) 求一棵树上两个节点的最近公共祖先有两种算法: (离线); 倍增(在线). 这篇博客只介绍倍增的写法. 表示节点的祖 ...
- codeforces 723A : The New Year: Meeting Friends
Description There are three friend living on the straight line Ox in Lineland. The first friend live ...
- 什么是 WSGI -- Python 中的 “CGI” 接口简介
今天在 git.oschina 的首页上看到他们推出演示平台,其中,Python 的演示平台支持 WSGI 接口的应用.虽然,这个演示平台连它自己提供的示例都跑不起来,但是,它还是成功的勾起了我对 W ...