城市选择案例

效果：

html部分：

<select name="src-city" id="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="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");
    })

})


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