一个简单的jquery左右列表内容切换应用

选中左边某个选项点击添加，即可将选中项添加到右边文本框中，点击选中全部即可将全部选项移到右边，移除按钮功能相同。

html代码：

 <div id="main">
     <div id="left">
         <div id="select1" class="sel">
             <span>apple</span>
             <span>huawei</span>
             <span>htc</span>
             <span>samsung</span>
         </div>
         <button id="add" value="选中添加">选中添加</button><br>
         <button id="add_all" value="选中全部">选中全部</button>
     </div>
     <div id="right">
         <div id="select2" class="sel">

         </div>
         <button id="remove" value="移除添加">移除添加</button><br>
         <button id="remove_all" value="移除全部">移除全部</button>
     </div>
 </div>

css：

 <style type="text/css">
         .sel{
             width: 100px;
             height: 160px;
             border:1px solid black;
         }
         span{
             display: block;
         }
         #left,#right{
             float: left;
             border:1px solid black;
             margin-right: 20px;
         }
         .light{
             background-color: blue;
         }
     </style>

jquery：

 <script type="text/javascript">
     $('span').click(function(){
         $(this).addClass("light").siblings().removeClass("light"); //当点击span标签时为它添加高亮样式light，并移除除选中项外的其他同级标签的light属性；
     });
     $("#add").click(function(){
         var options=$("#select1>.light");//获取选中项；
         options.removeClass("light").appendTo("#select2"); //将该span标签的light属性移除并移到右边；

     });
     $("#add_all").click(function(){
         var options=$("#select1 span");
         options.appendTo("#select2");
     });
     $("#remove").click(function(){
         var options=$(".light");
         options.removeClass("light").appendTo("#select1");
     });
     $("#remove_all").click(function(){
         var options=$("#select2 span");
         options.appendTo("#select1");
     });
 </script>