左右两个列表框项之间的添加、移除、上下移动

左右两个列表框项之间的添加、移除、上下移动

左右两个列表框项之间的添加、移除、上下移动的JS脚本：

Code
<script language="javascript" type="text/javascript">
// <!CDATA[
        //双击source某项时添加该项到destination
        function AddOne(source, destination) {
            var oOption = document.createElement("option");
            oOption.text = source.options[source.selectedIndex].text;
            oOption.value = source.options[source.selectedIndex].value;
            destination.options.add(oOption);
        }

        //双击list某项时删除该项
        function DeleteOne(list) {
            list.options.remove(list.selectedIndex);
        }

        //将source选择项全部添加到destination
        function selAdd(source, destination) {
            var count = source.options.length;
            for (var i = 0; i < count; i++) {
                if (source.options[i].selected) {
                    var oOption = document.createElement("option");
                    oOption.text = source.options[i].text;
                    oOption.value = source.options[i].value;
                    destination.options.add(oOption);
                }
            }
        }

        //将source所有项全部添加到destination
        function selAddAll(source, destination) {
            var count = source.options.length;
            for (var i = 0; i < count; i++) {
                var oOption = document.createElement("option");
                oOption.text = source.options[i].text;
                oOption.value = source.options[i].value;
                destination.options.add(oOption);
            }
        }

        //将list选择项全部删除
        function selDelete(list) {
            for (var i = list.options.length - 1; i >= 0; i--) {
                if (list.options[i].selected)
                    list.options.remove(i);
            }
        }

        //删除list所有项
        function selDeleteAll(list) {
            for (var i = list.options.length - 1; i >= 0; i--) {
                list.options.remove(i);
            }
        }
        //上移list某选择项
        function selUp(list) {
            var i = list.selectedIndex;
                if (i>0) {
                    var t = list.options[i - 1].text;
                    var v = list.options[i - 1].value;
                    list.options[i - 1].text = list.options[i].text;
                    list.options[i - 1].value = list.options[i].value;
                    list.options[i].text = t;
                    list.options[i].value = v;
                    list.options[i].selected = false;
                    list.options[i - 1].selected = true;
                    return;
                }
        }

        //下移list某选择项
        function selDown(list) {
            var i = list.selectedIndex;
            var count = list.options.length;
                if (i<count-1) {
                    var t = list.options[i].text;
                    var v = list.options[i].value;
                    list.options[i].text = list.options[i + 1].text;
                    list.options[i].value = list.options[i + 1].value;
                    list.options[i + 1].text = t;
                    list.options[i + 1].value = v;
                    list.options[i + 1].selected = true;
                    list.options[i].selected = false;
                    return;
                }
        }

        //保存list列表框所有项到hf隐藏域
        function SaveList(list, hf) {
            hf.value = "";
            for (var i = 0; i < list.options.length; i++) {
                hf.value += list.options[i].text + ":" + list.options[i].value + "#";
            }
        }

/**//////
        //双击lstSource列表框
        function lstSource_dblclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            AddOne(lstSource, lstDestination);
            DeleteOne(lstSource);
        }

        //双击lstDestination列表框
        function lstDestination_dblclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            AddOne(lstDestination, lstSource);
            DeleteOne(lstDestination);
        }

        //添加（从左往右）
        function btnAdd_onclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            selAdd(lstSource, lstDestination);
            selDelete(lstSource);
        }

        //全部添加（从左往右）
        function btnAddAll_onclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            selAddAll(lstSource, lstDestination);
            selDeleteAll(lstSource);
        }

        //移除（从右往左）
        function btnDelete_onclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            selAdd(lstDestination, lstSource);
            selDelete(lstDestination);
        }

        //全部移除（从右往左）
        function btnDeleteAll_onclick() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            selAddAll(lstDestination, lstSource);
            selDeleteAll(lstDestination);
        }
        
        //上移
        function btnUp_onclick() {
            var obj = document.getElementById("<%= lstDestination.ClientID %>");
            selUp(obj);
        }
        
        //下移
        function btnDown_onclick() {
            var obj = document.getElementById("<%= lstDestination.ClientID %>");
            selDown(obj);
        }

        //保存所有的列表框数据项到隐藏域
        function SaveAllList() {
            var lstSource = document.getElementById("<%= lstSource.ClientID %>");
            var hfListSource = document.getElementById("<%= hfListSource.ClientID %>");
            SaveList(lstSource, hfListSource);
            var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");
            var hfListDestination = document.getElementById("<%= hfListDestination.ClientID %>");
            SaveList(lstDestination, hfListDestination);
        }
// ]]>
    </script>

但是，通过JS脚本只是改变了列表框在客户端的各项内容，如果想保持列表框服务器端和客户端的内容一致，需借助HiddenField空间。页面元素代码如下：

Code
<table>            
            <tr>
                <td>    
        <asp:ListBox ID="lstSource" runat="server" Height="169px" Width="74px" 
                        SelectionMode="Multiple" ondblclick="return lstSource_dblclick()">
        </asp:ListBox>    
                </td>
                <td>
                    <table class="style1">
                        <tr>
                            <td>
    <input id="btnAdd" type="button" value="添加" onclick="return btnAdd_onclick()" /></td>
                        </tr>
                        <tr>
                            <td>
    <input id="btnAddAll" type="button" value="全部添加" onclick="return btnAddAll_onclick()" /></td>
                        </tr>
                        <tr>
                            <td>
    <input id="btnDelete" type="button" value="移除" onclick="return btnDelete_onclick()" /></td>
                        </tr>
                        <tr>
                            <td>
    <input id="btnDeleteAll" type="button" value="全部移除" onclick="return btnDeleteAll_onclick()" /></td>
                        </tr>
                    </table>
                </td>
                <td>
    
        <asp:ListBox ID="lstDestination" runat="server" Height="169px" Width="74px" 
                        SelectionMode="Multiple" ondblclick="return lstDestination_dblclick()">
        </asp:ListBox>    
                </td>
                <td>
                    <table class="style1">
                        <tr>
                            <td>
    <input id="btnUp" type="button" value="上移" 
        onclick="return btnUp_onclick()" /></td>
                        </tr>
                        <tr>
                            <td>
                                <input 
        id="btnDown" type="button" value="下移" onclick="return btnDown_onclick()" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>    
                    &nbsp;</td>
                <td align="center">
    <asp:Button 
        ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="确  定" 
                        OnClientClick="SaveAllList()" UseSubmitBehavior="False" />
                </td>
                <td>
    
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
    </table>
    
        <asp:HiddenField ID="hfListSource" runat="server" />    
        <asp:HiddenField ID="hfListDestination" runat="server" />

后台代码CS文件的Page_Load事件代码如下：

Code
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindSource();
                BindDestination();
            }
            else
            {
                lstSource.Items.Clear();
                string[] list = hfListSource.Value.Split('#');
                for (int i = 0; i < list.Length - 1; i++)
                {
                    string[] t = list[i].Split(':');
                    lstSource.Items.Add(new ListItem(t[0], t[1]));
                }

                lstDestination.Items.Clear();
                list = hfListDestination.Value.Split('#');
                for (int i = 0; i < list.Length - 1; i++)
                {
                    string[] t = list[i].Split(':');
                    lstDestination.Items.Add(new ListItem(t[0], t[1]));
                }
            }            
        }

posted on 2009-07-12 21:24 ms_dos 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/nine425/archive/2009/07/12/1522103.html