1.頁面

<table>
<tr width="100%" height="300px" style="margin:5px,auto;">
    <td width="40%">
        <select id="select1" multiple style="margin-left: 10px;">
            <option value="apple" selected>蘋果</option> 
            <option value="banana">香蕉</option> 
        </select>
    </td>
    <td width="20%" align="center">
        <input class="oprationb" id="add" type="button" value=">"/><br>
        <input class="oprationb"  id="remove" type="button" value="<"/><br>
        <input class="oprationb" id="add_all" type="button" value=">>"/><br>
        <input class="oprationb" id="remove_all" type="button" value="<<"/><br>
        <input id="mselect" style="width: 50px;margin-top:12px;height: 30px;" type="button" value="確定"/><br>
    </td>
    <td width="40%" >
        <select id="select2" multiple height="300px">

        </select>
    </td>
</tr>
</table>   

2.樣式

body{ font-family: Tahoma; font-size: 8pt ;}
select{
    width: 150px;
    height: 250px;
    border: 1px solid ;
}
.oprationb{
    width:20px;
    height: 20px;
    margin:5px 5px 5px 5px;
}
select option { 
    text-indent: 10px; 
    font: 14px/20px "Microsoft YaHei"; 
    margin-top: 20px;
    color:#00527f
} 

 select option:hover { 
    background-color: #f80; 
    color: #fff; 
} 
 

3.jquery

$(function(){
    //移到右邊
    $('#add').click(function(){
        //獲取選中的選項，刪除並追加給對方
        //$('#select1 option:selected').appendTo('#select2');
        $('#select1 option:selected').each(function(){
            var valk = $(this).val();
            var htmlk = $(this).html();
            $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); 
        })
    });
    //移到左邊
    $('#remove').click(function(){
       // $('#select2 option:selected').appendTo('#select1');
           $('#select2 option:selected').each(function(){
           $(this).remove();
       });
    })
    //全部移到右邊
    $('#add_all').click(function(){
        //獲取全部的選項,刪除並追加給對方
        //$('#select1 option').appendTo('#select2');
        $('#select1 option').each(function(){
            var valk = $(this).val();
            var htmlk = $(this).html();
            $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); 
        });
    });

    //全部移到左邊
    $('#remove_all').click(function(){
        //$('#select2 option').appendTo('#select1');
        $('#select2').empty();
    });

    //雙擊選項
    $('#select1').dblclick(function(){ //繫結雙擊事件
        //獲取全部的選項,刪除並追加給對方
       // $("option:selected",this).appendTo('#select2'); //追加給對方
        var valk = $("option:selected",this).val();
        var htmlk = $("option:selected",this).html();
        $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); 
    });

    //雙擊選項
    $('#select2').dblclick(function(){
       // $("option:selected",this).appendTo('#select1');
        $("option:selected",this).remove();
    });
});