Html：
<html ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/demo_19.css"/><script src="js/jquery-3.4.1.min.js"></script><script src="js/jquery_demo_19.js"></script></head><body> <div>Css：* { padding:0; margin:0;}body { font-size:12px; padding:100px;}select { width:100px; height:167px; padding:5px;}.content { float:left; text-align:center; margin-right:10px;}span { display:block; width:100px; background:#eee; cursor:pointer; border:1px solid #ccc; padding:5px 0; margin:5px 0;}Js：
$(document).ready(function(){ $("#add").click(function(){ $("#select1 option:selected").appendTo("#select2"); }); $("#add_all").click(function(){ $("#select1 option").appendTo("#select2"); }); $("#remove").click(function(){ $("#select2 option:selected").appendTo("#select1"); }); $("#remove_all").click(function(){ $("#select2 option").appendTo("#select1"); }); $("#select1").dblclick(function(){ $("#select1 option:selected").appendTo("#select2"); }); $("#select2").dblclick(function(){ $("#select2 option:selected").appendTo("#select1"); });});
