<%@ 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. 4.7 Routing -- Redirecting

    一.Transitioning and Redirection 从一个route调用transitionTo或者从一个controller调用transitionToRoute将会停止任何进程中的任何 ...

  2. 如何使用代码备份SQL Server数据库

    1.添加引用 using Microsoft.SqlServer.Management.Smo; using Microsoft.SqlServer.Management.Common; 2. Bac ...

  3. QML类型说明-ParallelAnimation

    ParallelAnimation ImportStatement:   import QtQuick2.2 Inherits:     Animation DetailedDescription S ...

  4. HTML5实现手机QQ表情功能

    主要素材和JS来自QQ空间触屏版( http://m.qzone.com ),我只是代码的搬运工.代码下载. 预览请使用较新版的Chrome,然后启用开发者工具,设备模式.详见:(http://www ...

  5. 清理tomcat日志大的文件

    先看一个命令: [root@weblogic logs]# catalina.--.log icatalina.--:-.out icatalina.--:-.out localhost_access ...

  6. Applet初次使用

    ZLYD团队Apllet学习笔记 初识Applet Applet是采用Java编程语言编写的小应用程序,该程序可以包含在 HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同.J ...

  7. myeclipse删除项目后重新导入

    今天安装了myeclipse2017版,刚开始导入项目后然后删除了,发现再次导入进来的时候不可以了. 解决方法:点击file -- >switch workspace -- >other ...

  8. SPOJ—VLATTICE Visible Lattice Points（莫比乌斯反演）

    http://www.spoj.com/problems/VLATTICE/en/ 题意: 给一个长度为N的正方形,从(0,0,0)能看到多少个点. 思路:这道题其实和能量采集是差不多的,只不过从二维 ...

  9. python 输出时间

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

  10. Java 字节的常用封装

    一. Java 的字节 byte (字节) 是 Java 中的基本数据类型,一个 byte 包含8个 bit(位),byte 的取值范围是-128到+127. byte 跟 Java 其他基本类型的关 ...