1.  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  2.  
  3.  <!DOCTYPE html>
  4.  
  5.  <html xmlns="http://www.w3.org/1999/xhtml">
  6.  <head runat="server">
  7.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.      <title></title>
  9.      <style>
  10.          #ListBox1, #ListBox2 {
  11.              width: 200px;
  12.              height: 200px;
  13.              float: left;
  14.          }
  15.      </style>
  16.  
  17.  </head>
  18.  <body>
  19.      <form id="form1" runat="server">
  20.          <div>
  21.              <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server">
  22.                  <asp:ListItem Value="">苹果</asp:ListItem>
  23.                  <asp:ListItem Value="">橘子</asp:ListItem>
  24.                  <asp:ListItem Value="">香蕉</asp:ListItem>
  25.                  <asp:ListItem Value="">葡萄</asp:ListItem>
  26.                  <asp:ListItem Value="">张柯</asp:ListItem>
  27.              </asp:ListBox>
  28.              <div style="float: left;">
  29.                  <input type="button" id="btn1" value="添加>>>" /><br />
  30.                  <input type="button" id="btn2" value="<<<移除" />
  31.                  <input type="button" id="btn_ok" value="确定" />
  32.              </div>
  33.              <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
  34.  
  35.          </div>
  36.      </form>
  37.  </body>
  38.  </html>
  39.  
  40.  <script src="JavaScript.js"></script>
  41.  <script src="JavaScript2.js"></script>
  1.  var oBtn1 = document.getElementById("btn1");
  2.  
  3.  oBtn1.onclick = function () {
  4.      //取出ListBox1中的选中项
  5.  
  6.      var lb1 = document.getElementById("ListBox1");
  7.  
  8.      for (var i = ; i < lb1.options.length; i++) {
  9.          if (lb1.options[i].selected == true) {
  10.              document.getElementById("ListBox2").appendChild(lb1.options[i]);
  11.          }
  12.  
  13.      }
  14.  };

JavaScript.js

  1.  var oBtn2 = document.getElementById("btn2");
  2.  
  3.  oBtn2.onclick = function () {
  4.  
  5.      var olb2 = document.getElementById("ListBox2");
  6.  
  7.      for (var i = ; i < olb2.options.length; i++) {
  8.          if (olb2.options[i].selected == true) {
  9.              var op = document.createElement("option");
  10.              op.value = olb2.options[i].value;
  11.              op.innerHTML = olb2.options[i].innerHTML;
  12.  
  13.              document.getElementById("ListBox1").appendChild(op);
  14.  
  15.          }
  16.      }
  17.  };

JavaScript2.js

JS 实战1（添加、删除）的更多相关文章

  1. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  2. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  3. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...

  4. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  5. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  6. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  7. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  8. js实现网页收藏功能，动态添加删除网址

    <html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...

  9. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  10. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

随机推荐

  1. CSS样式有哪些常用的属性？

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...

  2. 19重定向管道与popen模型

    重定向 dup2 int dup(int fd) 重定向文件描述符  int newFd = dup(STDOUT_FILENO) newFd 指向 stdout int dup2(int fd1, ...

  3. 2018-2019 ACM-ICPC, Asia Xuzhou Regional Contest Solution

    A. Rikka with Minimum Spanning Trees 题意: 给出一个图,求最小生成树的个数和权值 思路: 因为数据随机,只有一个MST #include <bits/std ...

  4. IDFA踩坑记录

    IDFA踩坑记录: 1.iOS10.0 以下,即使打开“限制广告跟踪”,依然可以读取idfa: 2.打开“限制广告跟踪”,然后再关闭“限制广告跟踪”,idfa会改变: 3.越狱机器安装开发证书打的包, ...

  5. deepin中crossover或playonlinux装完office后word无法输入中文的问题

    原因:office安装是自带了一个微软输入法 解决:装offce时进行自定义安装,在office共享功能里,把输入法去掉. 参考: https://jingyan.baidu.com/article/ ...

  6. 20145221 《Java程序设计》第三周学习总结

    20145221 <Java程序设计>第三周学习总结 教材学习内容总结 第四章部分已在假期完成,详见博客: <Java程序设计>第四章-认识对象 第五章部分 何谓封装 封装实际 ...

  7. HeyWeGo小组团队项目管理

    HeyWeGo团队小组项目管理 项目内容 使用java程序开发一款扫雷游戏 实现计划 第一周 明确项目内容.目标.分工,以及完成前期的一些准备 建立新的小组博客以及创建新的代码托管链接 第二周 实行初 ...

  8. Springboot与日志

    日志框架 比如开发一个大型系统:1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件?2.框架来记录系统的一些运行时信息:日志框架 :riz ...

  9. MQ是什么 RabbitMQ

    一.rabbitMQ是什么: RabbitMQ,遵循AMQP协议,由内在高并发的erlanng语言开发,用在实时的对可靠性要求比较高的消息传递上. 学过websocket的来理解rabbitMQ应该是 ...

  10. jsapi微信扫一扫

    微信公众号开发--微信JS-SDK扫一扫功能 首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明. 根据官方的使用步骤,关键的有以下几步 绑定域名(很关键) 引入JS文件(很简单) 通过con ...