ASP.NET DEMO 11: 两个 ListBox 互选（服务器端与客户端版本）

事实上，主要是如何考虑遍历元素个数变化的动态集合（因为遍历过程要执行删除）
特别是对于 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);
            }
        }
    }

客户端版本

// 方法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;
            }
        }
    }

页面效果

 

 

两个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);
            }
         }
      }

}  

  < 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 >