学步园

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

<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空间。页面元素代码如下：

<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