列表框數據移動

最新推荐文章于 2021-11-04 16:20:43 发布

Jasson

最新推荐文章于 2021-11-04 16:20:43 发布

阅读量364

点赞数

分类专栏： Javascript DOM CSS Ajax 文章标签： button asp server function xhtml html

本文链接：https://blog.csdn.net/jiali765/article/details/5110253

版权

Javascript DOM CSS Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在實際的運用中會碰到這樣的動作，就是要將列表框1（ListBox1）的值移動到列表框2（ListBox2）中去。如果要服務器的話會重新刷新頁面。這樣對服務器增加了負荷，效果也很不美觀。所以，應該採取客戶端腳本實現這個功能為好！對於這方面我根據網上朋友的分享，自己整理了個實例。

代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MoveTo.aspx.cs" Inherits="test.MoveTo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #Button2 { width: 46px; } </style> <mce:script language=javascript></mce:script> </head> <body> <form id="form1" runat="server"> <div> <asp:ListBox ID="ListBox1" runat="server" Height="158px" Width="141px" οndblclick="change(document.form1.ListBox1,document.form1.ListBox2);" SelectionMode="Multiple"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:ListBox> <input id="Button1" type="button" value="->" οnclick="rclick()" /><input id="Button2" type="button" value="<-" οnclick="lclick()" /><asp:ListBox ID="ListBox2" runat="server" Height="149px" style="margin-top: 0px" mce_style="margin-top: 0px" Width="118px" οndblclick="change(document.form1.ListBox2,document.form1.ListBox1);" SelectionMode="Multiple"></asp:ListBox> </div> </form> </body> </html>

設計思路：在.net中ListBox會轉換成html中的option。所以在開始要創建個option的實例來接受ListBox信息。接下來就是賦值信息了。跟著就根據信息進行轉換！