从左到右，从右到左(下拉框jquery)

表单

<style type="text/css">
        select{
            width:100px;
            height: 80px;
        }
        div{
            float: left;
            width: 130px;
        }
</style>
<div>
        <!--  multiple 下拉框的多选设置      -->
        <select multiple="multiple" name="select1">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div>
        <select multiple="multiple" name="select2">
        </select>
        <button>选中添加到左边</button>
        <button>全部添加到左边</button>
    </div>

效果图

选中添加到右边

<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //eq属性取第几个，从0开始计算
            $("button:eq(0)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
        });
    </script>

全部添加到右边

//eq  第2个button
            $("button:eq(1)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });

整体代码

	<style type="text/css">
        select{
            width:100px;
            height: 80px;
        }
        div{
            float: left;
            width: 130px;
        }
    </style>
    <script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //eq属性取button的第几个，从0开始计算   第1个button
            $("button:eq(0)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
            //eq  第2个button
            $("button:eq(1)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
            //eq  第3个button
            $("button:eq(2)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select2] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select1]");
                });
            });

            //eq  第4个button
            $("button:eq(3)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select2] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select1]");
                });
            });
        });
    </script>


    <div>
        <!--  multiple 下拉框的多选设置      -->
        <select multiple="multiple" name="select1">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div>
        <select multiple="multiple" name="select2">
        </select>
        <button>选中添加到左边</button>
        <button>全部添加到左边</button>
    </div>

整理：
尚硅谷