<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>

 <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>

 <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>