<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .centent{ display: inline-block; } span{ display: block; } </style> </head> <body> <div class="centent"> <select id="select1" multiple="multiple" style=" 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="addall">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style=" 100px; height: 160px;"></select> <div> <span id="remove"><<选中删除到左边</span> <span id="removeall"><<全部删除到左边</span> </div> </div> </body> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $('#add').click(function(){ var $options=$('#select1 option:selected'); $options.appendTo('#select2'); }); $('#addall').click(function(){ var $options=$('#select1 option'); $options.appendTo('#select2'); }); $('#select1').dblclick(function(){ var $options=$('option:selected',this); $options.appendTo('#select2'); }); $('#remove').click(function(){ var $options=$('#select2 option:selected'); $options.appendTo('#select1'); }); $('#removeall').click(function(){ var $options=$('#select2 option'); $options.appendTo('#select1'); }); $('#select2').dblclick(function(){ var $options=$('option:selected',this); $options.appendTo('#select1'); }); }) </script> </html>