ASP.NET DEMO 11: 两个 ListBox 互选(服务器端与客户端版本)
2007-07-18 04:44 晓风残月 阅读(1201) 评论(0) 编辑 收藏 举报
看似简单的问题, CSDN 中每每有人提问,故整理之
事实上,主要是如何考虑遍历元素个数变化的动态集合(因为遍历过程要执行删除)
特别是对于 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++;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 方法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;
}
}
}
页面效果
![](https://www.cnblogs.com/images/cnblogs_com/jinglecat/ASPNETDEOM11.jpg)
完整源码
下载
事实上,主要是如何考虑遍历元素个数变化的动态集合(因为遍历过程要执行删除)
特别是对于 C# ,不能使用 foreach,foreach 是只读遍历的。
服务器端版本
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
客户端版本
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
页面效果
![](https://www.cnblogs.com/images/cnblogs_com/jinglecat/ASPNETDEOM11.jpg)
完整源码
下载