ドロップダウンボックスの左右の選択

1、初期化

<div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1"> 1</option>
            <option value="2"> 2</option>
            <option value="3"> 3</option>
            <option value="4"> 4</option>
            <option value="5"> 5</option>
            <option value="6"> 6</option>
            <option value="7"> 7</option>
        </select>
        <div>
            <span id="add" > >></span>
            <span id="add_all" > >></span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8"> 8</option>
        </select>
        <div>
            <span id="remove"><< </span>
            <span id="remove_all"><< </span>
        </div>
    </div>

2、

$(function(){
    // 
    $('#add').click(function() {
    // ， 
        $('#select1 option:selected').appendTo('#select2');
    });
    // 
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    // 
    $('#add_all').click(function() {
        // , 
        $('#select1 option').appendTo('#select2');
    });
    // 
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    // 
    $('#select1').dblclick(function(){ // 
        // , 
        $("option:selected",this).appendTo('#select2'); // 
    });
    // 
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});