<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style>

         #ListBox1, #ListBox2 {

             width: 200px;

             height: 200px;

             float: left;

         }

     </style>

 </head>

 <body>

     <form id="form1" runat="server">

         <div>

             <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server">

                 <asp:ListItem Value="">苹果</asp:ListItem>

                 <asp:ListItem Value="">橘子</asp:ListItem>

                 <asp:ListItem Value="">香蕉</asp:ListItem>

                 <asp:ListItem Value="">葡萄</asp:ListItem>

                 <asp:ListItem Value="">张柯</asp:ListItem>

             </asp:ListBox>

             <div style="float: left;">

                 <input type="button" id="btn1" value="添加>>>" /><br />

                 <input type="button" id="btn2" value="<<<移除" />

                 <input type="button" id="btn_ok" value="确定" />

             </div>

             <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>

         </div>

     </form>

 </body>

 </html>

 <script src="JavaScript.js"></script>

 <script src="JavaScript2.js"></script>
 var oBtn1 = document.getElementById("btn1");

 oBtn1.onclick = function () {

     //取出ListBox1中的选中项

     var lb1 = document.getElementById("ListBox1");

     for (var i = ; i < lb1.options.length; i++) {

         if (lb1.options[i].selected == true) {

             document.getElementById("ListBox2").appendChild(lb1.options[i]);

         }

     }

 };

JavaScript.js

 var oBtn2 = document.getElementById("btn2");

 oBtn2.onclick = function () {

     var olb2 = document.getElementById("ListBox2");

     for (var i = ; i < olb2.options.length; i++) {

         if (olb2.options[i].selected == true) {

             var op = document.createElement("option");

             op.value = olb2.options[i].value;

             op.innerHTML = olb2.options[i].innerHTML;

             document.getElementById("ListBox1").appendChild(op);

         }

     }

 };

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. Linux 中的 Service

    参考: cnblogs.com/xiaofan21 - linux service和daemon cnblogs.com/xuange306 - linux service命令常见使用方法 cnblo ...

  2. C#反射——模仿BeanUtil属性复制

    反射工具类请参见:https://www.cnblogs.com/threadj/p/10535796.html using System; using System.Collections.Gene ...

  3. word 杂记

    45．error和exception有什么区别? 答案:Error表示系统级的错误和程序不必处理的异常,我们无法处理它. Exception表示是可以捕捉或者需要程序进行处理的异常. 47．abstr ...

  4. CentOS下安装JDK,Tomcat,Redis,Mysql，及项目发布

    上传文件到服务器,安装lrzsz , 可以将本地的文件上传到linux系统上. 如果是CentOS则可以用yum install lrzsz 命令安装,更方便. 或:yum -y install lr ...

  5. 反射_IsDefined判断方法上有自定义的标签

    在.NET 4.0(当然也包括4.0以前的版本)下,用反射判断某个方法是否运用了自定义Attribute时,可以通过调用MethodInfo的IsDefined()方法进行确认.当然,IsDefine ...

  6. Python笔记 #05# Package & pip3

    datacamp + 日常收集 How to install Package pip3 & What is difference between pip and pip3? Import  P ...

  7. 模块的封装之C语言类的继承和派生

    [交流][微知识]模块的封装(二):C语言的继承和派生 在模块的封装(一):C语言的封装中,我们介绍了如何使用C语言的结构体来实现一个类的封装,并通过掩码结构体的方式实 现了类成员的保护.这一部分,我 ...

  8. python 输出时间

    import datetime print(datetime.datetime.now().time())

  9. 最近公共祖先问题 LCA

    2018-03-10 18:04:55 在图论和计算机科学中,最近公共祖先,LCA(Lowest Common Ancestor)是指在一个树或者有向无环图中同时拥有v和w作为后代的最深的节点. 计算 ...

  10. Jmeter非GUI模式启动

    首先我们需要了解,GUI和非GUI模式启动Jmeter对测试的影响:Jmeter可视化界面及监听器展示结果需要消耗负载资源,从而导致,在大并发的情况下GUI方式会导致负载机资源紧张,对性能造成影响 e ...