ListBox的客户端添加删除操作
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebExample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
function Add()
{
var elemAll = document.getElementById("lbAll");
var elemSel = document.getElementById("lbSel");
for(var i=0;i<elemAll.options.length;i++)
{
if(elemAll.options[i].selected)
{
var SelText=elemAll.options[i].innerText;
var SelValue = elemAll.options[i].value;
var Num = elemSel.options.length;
elemSel.options[Num]=new Option(SelText,SelValue);
elemAll.options.remove(i);
i--;
}
}
}
function Remove()
{
var elemAll = document.getElementById("lbAll");
var elemSel = document.getElementById("lbSel");
for(var i=0;i<elemSel.options.length;i++)
{
if(elemSel.options[i].selected)
{
var SelText = elemSel.options[i].innerText;
var SelValue = elemSel.options[i].value;
var Num = elemAll.options.length;
elemAll.options[Num]= new Option(SelText,SelValue);
elemSel.options.remove(i);
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE>
<TR>
<TD>
<asp:ListBox id="lbAll" runat="server" Width="100px" Height="150px" SelectionMode="Multiple"></asp:ListBox></TD>
<TD>
<INPUT id="btnAdd" type="button" value=">>" onclick="Add();"><br>
<INPUT id="btnRemove" type="button" value="<<" onclick="Remove();">
</TD>
<TD>
<asp:ListBox id="lbSel" runat="server" Width="100px" Height="150px" SelectionMode="Multiple"></asp:ListBox></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
function Add()
{
var elemAll = document.getElementById("lbAll");
var elemSel = document.getElementById("lbSel");
for(var i=0;i<elemAll.options.length;i++)
{
if(elemAll.options[i].selected)
{
var SelText=elemAll.options[i].innerText;
var SelValue = elemAll.options[i].value;
var Num = elemSel.options.length;
elemSel.options[Num]=new Option(SelText,SelValue);
elemAll.options.remove(i);
i--;
}
}
}
function Remove()
{
var elemAll = document.getElementById("lbAll");
var elemSel = document.getElementById("lbSel");
for(var i=0;i<elemSel.options.length;i++)
{
if(elemSel.options[i].selected)
{
var SelText = elemSel.options[i].innerText;
var SelValue = elemSel.options[i].value;
var Num = elemAll.options.length;
elemAll.options[Num]= new Option(SelText,SelValue);
elemSel.options.remove(i);
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE>
<TR>
<TD>
<asp:ListBox id="lbAll" runat="server" Width="100px" Height="150px" SelectionMode="Multiple"></asp:ListBox></TD>
<TD>
<INPUT id="btnAdd" type="button" value=">>" onclick="Add();"><br>
<INPUT id="btnRemove" type="button" value="<<" onclick="Remove();">
</TD>
<TD>
<asp:ListBox id="lbSel" runat="server" Width="100px" Height="150px" SelectionMode="Multiple"></asp:ListBox></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>