//下拉框左右选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left, .right { float: left; height: 250px; width: 120px; margin-left: 10px; } #select1, #select2 { height: 200px; width: 120px; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { $("#buttonl1").click(function () { $('#select1 option:selected').appendTo('#select2'); }); $("#buttonl2").click(function () { var $reall=$("#select1 option"); $reall.appendTo($("#select2")); }) $("#buttonr1").click(function () { $("#select2 option:selected").appendTo("#select1"); }) $("#buttonr2").click(function () { var $reall=$("#select2 option"); $reall.appendTo($("#select1")); }) //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }) </script> </head> <body> <div class="left"> <select name="select1" id="select1" multiple="multiple"> <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> <input type="button" value="选中添加到右边>>" id="buttonl1"> <input type="button" value="全部添加到右边>>" id="buttonl2"> </div> <div class="right"> <select name="select2" id="select2" multiple="multiple"> <option value="8">选项8</option> </select> <input type="button" value="<<选中删除到左边" id="buttonr1"> <input type="button" value="<<全部删除到左边" id="buttonr2"> </div> </body> </html>