jQuery_城市选择

想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中

HTML结构：

<div class="main">
    <select name="sel_city" id="sel_city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
    </select>
    <div class="btn_class">
        <button class="btn1">&gt;&gt;</button>
        <button class="btn2">&lt;&lt;</button>
        <button class="btn3">&lt;</button>
        <button class="btn4">&gt;</button>
    </div>
    <select name="tar_city" id="tar_city" multiple>

    </select>
</div>

JS：

<script>
    $(document).ready(function(){
        //第一个按钮
        $('.btn1').on('click',function(){
              $('#sel_city option').appendTo('#tar_city');
        });
       //第二个按钮
        $('.btn2').on('click',function(){
            $('#tar_city option').appendTo('#sel_city');
        });
        //第三个按钮
        $('.btn3').on('click',function(){
            $('#tar_city option:selected').appendTo('#sel_city');
        });
        //第四个按钮
        $('.btn4').on('click',function(){
            $('#sel_city option:selected').appendTo('#tar_city');
        });
    });
</script>

第一个按钮：将左边的全部移到右边

第二个按钮：将右边的全部移动到左边

第三个按钮：将右边选中的城市移动到左边

第四个按钮：将左边选中的城市移动到右边
效果：