<%@ 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. EWD简介

    Edsger Wybe Dijkstra was a principal contributor in the late 1950's to the development of the ALGOL, ...

  2. Specifications查询

    Spring Data JPA支持JPA2.0的Criteria查询,相应的接口是JpaSpecificationExecutor. Criteria 查询:是一种类型安全和更面向对象的查询 这个接口 ...

  3. GIT学习笔记（1）：创建版本库

    GIT学习笔记(1):创建版本库 创建版本库 1.创建合适目录并初始化为仓库 版本库即需要交由Git进行版本控制的目录,其下所有文件的修改.删除,Git都能跟踪还原. 说明:初始化后,当前目录下会多出 ...

  4. Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2)

    A. The King's Race 签. #include <bits/stdc++.h> using namespace std; #define ll long long ll n, ...

  5. Java Mail 邮件发送简单封装

    上一篇文章我们用写了一个Java Mail 的Demo,相信你已经可以用那个例子来发送邮件了.但是Demo 有很多的问题. 首先每次发送需要配置的东西很多,包括发件人的邮箱和密码.smtp服务器和SM ...

  6. InstallShield的工程类型的选择

    转载:http://blog.csdn.net/wuxiaoqrs/article/details/45717695 InstallScript vs. Basic MSI InstallScript ...

  7. ASP.NET WEB API 2: HTTP MESSAGE LIFECYLE

    https://www.asp.net/media/4071077/aspnet-web-api-poster.pdf 1.You can host Web API inside IIS or ins ...

  8. Flask 4 拓展

    NOTE 1.Flask被设计为可拓展模式,所以没有提供如数据库和用户认证等重要的功能,允许开发者按需开发. 2.使用Flask-Script支持命令行选项: 安装flask-script: pip ...

  9. BZOJ 1042: [HAOI2008]硬币购物（容斥原理）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1042 题意: 思路: 如果不考虑硬币个数的话,这就是一道完全背包的题目. 直接求的话行不通,于是这里 ...

  10. 优化 Redis 的使用策略

    Redis Key 的命名策略 Redis 是 K-V 形式的缓存数据库,每一个需要缓存的 Object 都需要唯一的 Key 来标识.但是,我们日常在做开发的时候,经常会出现一个公司或者部门之间共用 ...