事实上,主要是如何考虑遍历元素个数变化的动态集合(因为遍历过程要执行删除)
特别是对于 C# ,不能使用 foreach,foreach 是只读遍历的。
服务器端版本
// 方法1,正序遍历
private void SwapListBox(ListBox src, ListBox dst)
{
for (int i = 0; i < src.Items.Count; ) {
ListItem item = src.Items[i];
if (item.Selected) {
src.Items.Remove(item);
// 保持选中状态
item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0) ? item.Selected : false);
dst.Items.Add(item);
continue;
}
i++;
}
}
// 方法1,倒序遍历
private void SwapListBox2(ListBox src, ListBox dst)
{
for (int i = src.Items.Count - 1; i >= 0;i-- ) {
ListItem item = src.Items[i];
if (item.Selected) {
src.Items.Remove(item);
// 保持选中状态
item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0) ? item.Selected : false);
dst.Items.Add(item);
}
}
}
private void SwapListBox(ListBox src, ListBox dst)
{
for (int i = 0; i < src.Items.Count; ) {
ListItem item = src.Items[i];
if (item.Selected) {
src.Items.Remove(item);
// 保持选中状态
item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0) ? item.Selected : false);
dst.Items.Add(item);
continue;
}
i++;
}
}
// 方法1,倒序遍历
private void SwapListBox2(ListBox src, ListBox dst)
{
for (int i = src.Items.Count - 1; i >= 0;i-- ) {
ListItem item = src.Items[i];
if (item.Selected) {
src.Items.Remove(item);
// 保持选中状态
item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0) ? item.Selected : false);
dst.Items.Add(item);
}
}
}
客户端版本
// 方法1,正序遍历
function SwapListBox(srcId, dstId)
{
//debugger;
var src = document.getElementById(srcId);
var dst = document.getElementById(dstId);
for (var i = 0; i < src.options.length; ) {
var opt = src.options[i];
if (opt.selected) {
src.options[i] = null; // 设置空引用,则直接删除
// 保持选中状态
opt.selected = ((dst.multiple || dst.selectedIndex < 0) ? opt.selected : false);
dst.options[dst.options.length] = opt; // 追加项,dst.options[dst.options.length],js 数组特有的语法,不需要显示 add
continue;
}
i++;
}
}
// 方法2,反序遍历
function SwapListBox2(srcId, dstId)
{
var src = document.getElementById(srcId);
var dst = document.getElementById(dstId);
for (var i = src.options.length - 1; i >=0; i--) {
var opt = src.options[i];
if (opt.selected) {
src.options[i] = null; // 设置空引用,则直接删除
// 保持选中状态
opt.selected = ((dst.multiple || dst.selectedIndex < 0) ? opt.selected : false);
dst.options[dst.options.length] = opt;
}
}
}
function SwapListBox(srcId, dstId)
{
//debugger;
var src = document.getElementById(srcId);
var dst = document.getElementById(dstId);
for (var i = 0; i < src.options.length; ) {
var opt = src.options[i];
if (opt.selected) {
src.options[i] = null; // 设置空引用,则直接删除
// 保持选中状态
opt.selected = ((dst.multiple || dst.selectedIndex < 0) ? opt.selected : false);
dst.options[dst.options.length] = opt; // 追加项,dst.options[dst.options.length],js 数组特有的语法,不需要显示 add
continue;
}
i++;
}
}
// 方法2,反序遍历
function SwapListBox2(srcId, dstId)
{
var src = document.getElementById(srcId);
var dst = document.getElementById(dstId);
for (var i = src.options.length - 1; i >=0; i--) {
var opt = src.options[i];
if (opt.selected) {
src.options[i] = null; // 设置空引用,则直接删除
// 保持选中状态
opt.selected = ((dst.multiple || dst.selectedIndex < 0) ? opt.selected : false);
dst.options[dst.options.length] = opt;
}
}
}
页面效果
两个ListBox的互动方法:
效果:
ASPX页面:
CS Code :
using
System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Test1 : System.Web.UI.Page
{
protected void Page_Load ( object sender , EventArgs e )
{
}
protected void btnToRight_Click(object sender, EventArgs e)
{
if(lbLeft.SelectedItem != null)
{
AddItemFromSourceListBox(lbLeft, lbRight);
RemoveSelectedItem(lbLeft);
lblMsg.Text=""; //注意:为什么要这一行?
foreach(ListItem item in lbRight.Items)
{
if(item.Selected)
lblMsg.Text +=item.Text;
}
}
}
protected void btnToLeft_Click(object sender, EventArgs e)
{
if(lbRight.SelectedItem != null)
{
AddItemFromSourceListBox(lbRight, lbLeft);
RemoveSelectedItem(lbRight);
}
}
private void RemoveSelectedItem(ListBox listControl)
{
while(listControl.SelectedIndex != -1)
{
listControl.Items.RemoveAt(listControl.SelectedIndex);
}
}
private void AddItemFromSourceListBox(ListBox sourceBox,ListBox targetBox)
{
foreach(ListItem item in sourceBox.Items)
{
if(item.Selected == true && !targetBox.Items.Contains(item))
{
targetBox.Items.Add(item);
}
}
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Test1 : System.Web.UI.Page
{
protected void Page_Load ( object sender , EventArgs e )
{
}
protected void btnToRight_Click(object sender, EventArgs e)
{
if(lbLeft.SelectedItem != null)
{
AddItemFromSourceListBox(lbLeft, lbRight);
RemoveSelectedItem(lbLeft);
lblMsg.Text=""; //注意:为什么要这一行?
foreach(ListItem item in lbRight.Items)
{
if(item.Selected)
lblMsg.Text +=item.Text;
}
}
}
protected void btnToLeft_Click(object sender, EventArgs e)
{
if(lbRight.SelectedItem != null)
{
AddItemFromSourceListBox(lbRight, lbLeft);
RemoveSelectedItem(lbRight);
}
}
private void RemoveSelectedItem(ListBox listControl)
{
while(listControl.SelectedIndex != -1)
{
listControl.Items.RemoveAt(listControl.SelectedIndex);
}
}
private void AddItemFromSourceListBox(ListBox sourceBox,ListBox targetBox)
{
foreach(ListItem item in sourceBox.Items)
{
if(item.Selected == true && !targetBox.Items.Contains(item))
{
targetBox.Items.Add(item);
}
}
}
}
<
table
>
< tbody >
< tr >
< td >
< asp:ListBox ID = " lbLeft " runat = " server " SelectionMode = " Multiple " >
< asp:ListItem > 添加名字 </ asp:ListItem >
< asp:ListItem > 出生年月 </ asp:ListItem >
</ asp:ListBox >
</ td >
< td style = " width: 27px " >
< asp:Button ID = " btnToRight " runat = " server " Text = " >> "
OnClick = " btnToRight_Click " />
< br />
< asp:Button ID = " btnToLeft " runat = " server " Text = " << "
OnClick = " btnToLeft_Click " />
</ td >
< td style = " width: 3px " >
< asp:ListBox ID = " lbRight " runat = " server "
SelectionMode = " Multiple " ></ asp:ListBox ></ td >
</ tr >
</ tbody >
</ table >
< asp:Label ID = " lblMsg " runat = " server " ></ asp:Label >
< tbody >
< tr >
< td >
< asp:ListBox ID = " lbLeft " runat = " server " SelectionMode = " Multiple " >
< asp:ListItem > 添加名字 </ asp:ListItem >
< asp:ListItem > 出生年月 </ asp:ListItem >
</ asp:ListBox >
</ td >
< td style = " width: 27px " >
< asp:Button ID = " btnToRight " runat = " server " Text = " >> "
OnClick = " btnToRight_Click " />
< br />
< asp:Button ID = " btnToLeft " runat = " server " Text = " << "
OnClick = " btnToLeft_Click " />
</ td >
< td style = " width: 3px " >
< asp:ListBox ID = " lbRight " runat = " server "
SelectionMode = " Multiple " ></ asp:ListBox ></ td >
</ tr >
</ tbody >
</ table >
< asp:Label ID = " lblMsg " runat = " server " ></ asp:Label >