效果：

html部分：

<select name="src-city" id="src-city" multiple>
    <option value="http://www.mamicode.com/1">北京</option>
    <option value="http://www.mamicode.com/2">上海</option>
    <option value="http://www.mamicode.com/3">深圳</option>
    <option value="http://www.mamicode.com/4">广州</option>
    <option value="http://www.mamicode.com/5">四川</option>
</select>
<div class="btn-box">
    <button id="btn-sel-all"> &gt;&gt;</button>
    <button id="btn-sel-none"> &lt;&lt;</button>
    <button id="btn-back">&gt;</button>
    <button id="btn-sel">&lt;</button>
</div>
<select name="tar-city" id="tar-city" multiple>

</select>

jq部分：
$(function(){

    $("#btn-sel-all").on(‘click‘,function(){
       $("#src-city option").appendTo("#tar-city");
    });
    $("#btn-sel-none").on(‘click‘,function(){
        $("#tar-city option").appendTo("#src-city");
    })
    $("#btn-back").on(‘click‘,function(){
        $("#src-city option:selected").appendTo("#tar-city");
    })
    $("#btn-sel").on(‘click‘,function(){
        $("#tar-city option:selected").appendTo("#src-city");
    })

})


今天刚好看到，留着以后肯定会用上的

城市选择案例