[半原创]2个ListBox的内容交互

　　　

　　　　效果

          

 

　　　　页面

　　　　<asp:ListBox id="SourceListBox" runat="server">

 <asp:ListItem Text="1" Value="1" />
 <asp:ListItem Text="2" Value="2" />
 <asp:ListItem Text="3" Value="3" />
 <asp:ListItem Text="4" Value="4" />

           </asp:ListBox>
           <input id="add" type="button" onclick="AddOne('ctl00_body_SourceListBox','ctl00_body_DestinationListBox')"  value=">"/>
           <input id="add" type="button" onclick="AddAll('ctl00_body_SourceListBox','ctl00_body_DestinationListBox')"  value=">>"/>
           <input id="del" type="button" onclick="AddOne('ctl00_body_DestinationListBox','ctl00_body_SourceListBox')"  value="<"/>
           <input id="del" type="button" onclick="AddAll('ctl00_body_DestinationListBox','ctl00_body_SourceListBox')" value="<<" />
           <asp:ListBox id="DestinationListBox" runat="server">
          
           </asp:ListBox>

　　　　JS

    <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 lst2=window.document.getElementById(ltbDestination);
            var opNum=lst2.options.length;
            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>