参考资料：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>界面显示：
【四】jquery之文档处理习题（内部处理、外部处理）
原文地址：https://www.cnblogs.com/8013-cmf/p/8428188.html