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;

            }

        }

    }

頁面效果

完整源碼

下載下傳

轉載于:https://www.cnblogs.com/hzuIT/articles/823648.html