Jquery实现两个select框中元素操作

定义两个select下拉列表框

<select id="select1" multiple="multiple" style="width:100px;">
             <option value="aa">aa</option>
             <option value="bb">bb</option>
             <option value="cc">cc</option>
              <option value="dd">dd</option>

</select>

<select id="select2" multiple="multiple" style="width:100px;">
           

</select>

Jquery代码如下：

<script>
         $(function () {

                 //  一左边移动到右边
                 $("#moveToRight").click(function () {
                             var options = $("#select1 option:selected");    //获取左边选中项
                             var removes = options.remove();                       //删除左边下拉列表中选中的选项
                             removes.appendTo("#select2");                        //添加到select2

                  });

                 //  二左边全部移动到右边
                $("#moveAll").click(function () {
                       var options = $("#select1 option");

                       var removes = options.remove();
                       options.appendTo("#select2");
                });

                //  三右边移动到左边
               $("#moveToLeft").click(function () {
                       var options = $("#select2 option:selected");  

                       var removes = options.remove();
                       removes.appendTo("#select1");
                });

                //四右边全部移动到左边
                $("#removeAll").click(function () {
                          var $option = $("#select2 option");

                          var removes = options.remove();
                          $option.appendTo("#select1");
                 });

     });
    </script>