【原】js实现2个listbox的乾坤大挪移

参考网上的代码，作了些修改，操作更简单。话不多説，看代码：（此方法同样适用于select，毕竟listBox在客户端就时一个select）

<script language="javascript" type="text/javascript">
        
        function AddAll(lsbSource,ltbDestination)
        {
            var lst1=window.document.getElementById(lsbSource);            
            var length = lst1.options.length;
             if(length<=0)
                return;
            var opNum=0;
            var lst2=window.document.getElementById(ltbDestination);
            for(var i=length;i>0;i--)
            {                  
                var v = lst1.options[i-1].value;
                var t = lst1.options[i-1].text; 
                lst2.options[opNum]= new Option(t,v,true,true);
                lst1.options[i-1].parentNode.removeChild(lst1.options[i-1]);     
                opNum++;            
            }    
        }
        
        function AddOne(lsbSource,ltbDestination)
        {
            var lst1=window.document.getElementById(lsbSource);
            var lstindex=lst1.selectedIndex;           
            if(lstindex<0)
                return;
        var v = lst1.options[lstindex].value;
            var t = lst1.options[lstindex].text;            
        var lst2=window.document.getElementById(ltbDestination);
            var length = lst2.options.length;
            lst2.options[length] = new Option(t,v,true,true);
            lst1.options[lstindex].parentNode.removeChild(lst1.options[lstindex]);
        }
 
</script>

==================================

页面部分
 1<form runat="server">
 2<asp:ListBox id="SourceListBox" runat="server">
 3<asp:ListItem Text="1" Value="1.1" />
 4<asp:ListItem Text="2" Value="2.1" />
 5<asp:ListItem Text="3" Value="3.1" />
 6<asp:ListItem Text="4" Value="4.1" />
 7</asp:ListBox>
 8<input id="add" type="button" onclick="AddOne('SourceListBox','DestinationListBox')"  value=">"/>
 9<input id="add" type="button" onclick="AddAll('SourceListBox','DestinationListBox')"  value=">>"/>
10<input id="del" type="button" onclick="AddOne('DestinationListBox','SourceListBox')"  value="<"/>
11<input id="del" type="button" onclick="AddAll('DestinationListBox','SourceListBox')" value="<<" />
12<asp:ListBox id="DestinationListBox" runat="server">
13
14</asp:ListBox>
15</form>

注意：这种方式添加的Listitem是不能在服务器端获取值的，因为ListBox在客户端是解释成了Select来的，以上所有操作都不能保存在页面的ViewState中。如果要取得ListBox中新增加的值，我的做法是在页面提交时，用js取出ListBox中的值，然后保存在一个隐藏域里来解决这个问题的。如果你有更好的方法，欢迎留下学习~~