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>
