JQuery 左右互选

引用js

<script type="text/javascript" src="jquery-1.10.2.js"></script>

js

$(function(){
  $("#toRight").click(function () {
       $("#right").append($("#left option:selected")
  });
  $("#allToRight").click(function () {
       $("#right").append($("#left option"));
  });
  $("#toLeft").click(function () {
        $("#left").append($("#right option:selected"));
  });
  $("#allToLeft").click(function () {
        $("#left").append($("#right option"));
  });
})   

html

     <table>
        <tr>
            <td>
                <select id="left" multiple="multiple" style="width:200px;height:300px;">
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                    <option>option 7</option>
                    <option>option 8</option>
                </select>
            </td>
            <td>
                <input id="toRight" type="button" value="--->" style="width:50px;"/>
                <br />
                <input id="allToRight" type="button" value="===>" style="width:50px;"/>
                <br />
                <input id="toLeft" type="button" value="<---" style="width:50px;" />
                <br />
                <input id="allToLeft" type="button" value="<===" style="width:50px;" />
            </td>
            <td>
                <select id="right" multiple="multiple" style="width:200px;height:300px;">
                    <option>option 9</option>
                </select>
            </td>
        </tr>
    </table>

 效果图