作业一:两个列表之间数据从一个列表移动到另一个列表

<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作业----两个列表之间移动数据的更多相关文章

  1. 9月23日JavaScript作业----日期时间选择

    作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...

  2. 9月23日JavaScript作业----子菜单下拉

    例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...

  3. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  4. 5月23日 JavaScript

    一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...

  5. 5月23日 JavaScript练习:累加求和

    第一种方法: 第二种方法:

  6. java script两个列表之间移动数据

    <select name="b1" id="hao" style="width:100px; height:200px;" size= ...

  7. Week16(12月23日):复习

    Part I:提问 =========================== 1.声明强类型视图时,使用关键字(    ) A.ViewBag    B.model    C.Type    D.Tit ...

  8. 2016年6月23日 星期四 --出埃及记 Exodus 14:20

    2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...

  9. 北京Uber优步司机奖励政策(11月23日~11月29日)

    用户组:人民优步"关羽组"(适用于11月23日-11月29日)奖励政策: 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最 ...

随机推荐

  1. 1031MySQL事务隔离级别详解

    转自http://xm-king.iteye.com/blog/770721 SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的.低级别的隔离级一般支 ...

  2. jsp内置对象作业1-用户登录

    题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...

  3. java-a实现压缩与解压缩(zip、gzip)

    zip扮演着归档和压缩两个角色:gzip并不将文件归档,仅只是对单个文件进行压缩,所以,在UNIX平台上,命令tar通常用来创建一个档案文件,然后命令gzip来将档案文件压缩. Java I/O类库还 ...

  4. 【收藏】Android屏幕适配全攻略(最权威的Google官方适配指导)

    来源:http://blog.csdn.net/zhaokaiqiang1992 更多:Android AutoLayout全新的适配方式, 堪称适配终结者 Android的屏幕适配一直以来都在折磨着 ...

  5. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  6. 使用触发器实现记录oracle用户登录失败信息到alert.log日志文件

    前面我们说了用oracle自带的审计功能可以实现记录用户登录失败日志到数据表中(链接:http://www.54ok.cn/6778.html).今天我们来分享一下如何把用户登录失败信息记录到aler ...

  7. Redis哈希-hash

    Redis的hash类型数据存储极为重要 hset K V  赋值一个hash 其中V为 (key, value) 127.0.0.1:6379> hset user id 1(integer) ...

  8. [学习笔记]lca-倍增

    The article is to Jimmy.(方老师讲过了还不会,想怎样???) 求一棵树上两个节点的最近公共祖先有两种算法: (离线); 倍增(在线). 这篇博客只介绍倍增的写法. 表示节点的祖 ...

  9. codeforces 723A : The New Year: Meeting Friends

    Description There are three friend living on the straight line Ox in Lineland. The first friend live ...

  10. 什么是 WSGI -- Python 中的 “CGI” 接口简介

    今天在 git.oschina 的首页上看到他们推出演示平台,其中,Python 的演示平台支持 WSGI 接口的应用.虽然,这个演示平台连它自己提供的示例都跑不起来,但是,它还是成功的勾起了我对 W ...