参考资料：http://jquery.cuishifeng.cn/index.html
代码：
<!DOCTYPE html> <html> <head> <style type="text/css"> select{ height: 140px; border: #000 1px solid; } </style> <script type="text/javascript" src="jquery-3.3.1.js"></script> <meta charset="UTF-8"> </head> <body> <select multiple="multiple" id="select1"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="button" value="<==" id="b4"> <input type="button" value="<=" id="b3"> <input type="button" value="=>" id="b1"> <input type="button" value="==>" id="b2"> <select multiple="multiple" id="select2"> <option value="游戏">游戏</option> </select> <script type="text/javascript"> $(document).ready(function(){ //给id为b1的按钮绑定click事件 $("#b1").click(function(){ // alert($("#select1 option:selected").val()); // id为select1且option为选中状态的元素添加到id为select2下 $("#select1 option:selected").appendTo($("#select2")); }); }); $(document).ready(function(){ $("#b2").click(function(){ $("#select1 option").appendTo($("#select2")); }) }); $(document).ready(function(){ $("#b3").click(function(){ $("#select2 option:selected").appendTo($("#select1")); }) }); $(document).ready(function(){ $("#b4").click(function(){ $("#select2 option").appendTo($("#select1")); }) }); $(document).dblclick(function(){ $("#select1 option:selected").appendTo($("#select2")); }); </script> </body> </html>
界面显示：
