<%@ 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. Q_OBJECT宏的作用

    The Q_OBJECT macro at the beginning of the class definition is necessary for all classes that define ...

  2. 在Java中关于二进制、八进制、十六进制的辨析

    八进制数中不可能出7以上的阿拉伯数字.但如果这个数是123.是567,或12345670,那么它是八进制数还是10进制数?单从数字的角度来讲都有可能! 八进制 所以在Java中规定,一个数如果要指明它 ...

  3. bzoj1609 / P2896 [USACO08FEB]一起吃饭Eating Together（最长不降子序列）

    P2896 [USACO08FEB]一起吃饭Eating Together 显然的最长不升/降子序列,求出最长值,则答案为$n-$最长值(改掉剩下的). 复杂度$O(nlogn)$ (然鹅有神仙写了$ ...

  4. GreenOpenPaint的实现（三）添加标尺

    标尺对于图像处理程序,特别是需要精确测量的程序来说意义很大.这里进行了专门的研究. 基于现在已经引入的类和定义的变量,主要讲一讲如何调用. 1.添加放大缩小 void CGreenOpenPaintD ...

  5. 20145325张梓靖 《Java程序设计》第5周学习总结

    20145325张梓靖 <Java程序设计>第5周学习总结 教材学习内容总结 try catch Java中所有错误都会被打包为对象.如果某个方法声明会抛出Throwable或子类实例,只 ...

  6. 如何在 OSX 中使用多个JDK版本

    升级macbook小白的硬盘成SSD后,重新安装了系统和JDK8,但是启动eclipse还是报告需要安装JDK6,于是也按照提示安装了Apple JDK6,这导致系统中有两个JDK,一个是Oracle ...

  7. enum SQLiteDateFormats

    DateTimeFormatInfo.CurrentInfo https://msdn.microsoft.com/en-us/library/system.globalization.datetim ...

  8. 【软件位置】Linux查看软件安装的位置

    如果我们在Linux 系统上安装了某个软件,我们可以通过如下的三种方式来确定. 一．        Which 命令 Shell 的which 命令可以找出相关命令是否已经在搜索路径中. 如: [ro ...

  9. 第二章 第二个spring-boot程序

    上一节的代码是spring-boot的入门程序,也是官方文档上的一个程序.这一节会引入spring-boot官方文档推荐的方式来开发代码,并引入我们在spring开发中service层等的调用. 1. ...

  10. python 矩阵转置

    arrA=[[,,,],[,,,],[,,,],[,,,]] N= #声明4x4数组arr arrB=[[None] * N for row in range(N)] print('[原设置的矩阵内容 ...