应用场景：左侧是已有商品，右侧是未有商品，选择其中的内容点击箭头即可互换：
点击大箭头则全部内容去另一边，或者双击已有商品的选项也会加入右边：
代码实现：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>下拉列表左右选择</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ???????<script> ???????????$(function() { ???????????????/*1.选中单击去右边*/ ???????????????$("#selectOneToRight").click(function() { ???????????????????$("#left option:selected").appendTo($("#right")); ???????????????}); ???????????????/*2.单击全部去右边*/ ???????????????$("#selectAllToRight").click(function() { ???????????????????$("#left option").appendTo($("#right")); ???????????????}); ???????????????/*3.选中双击去右边*/ ???????????????$("#left option").dblclick(function() { ???????????????????$("#left option:selected").appendTo($("#right")); ???????????????}); ???????????????$("#selectOneToLeft").click(function() { ???????????????????$("#right option:selected").appendTo($("#left")); ???????????????}); ???????????????$("#selectAllToLeft").click(function() { ???????????????????$("#right option").appendTo($("#left")); ???????????????}); ???????????????$("#right option").dblclick(function() { ???????????????????$("#right option:selected").appendTo($("#left")); ???????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<table border="1" width="600" align="center"> ???????????<tr> ???????????????<td> ???????????????????分类名称 ???????????????</td> ???????????????<td> ???????????????????<input type="text" name="cname" value="手机数码" /> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????分类描述 ???????????????</td> ???????????????<td> ???????????????????<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????分类商品 ???????????????</td> ???????????????<td> ???????????????????<span style="float: left;"> ???????????????????????<font color="green" face="宋体">已有商品</font><br/> ???????????????????????<select multiple="multiple" style="width: 100px;height: 200px;" id="left"> ???????????????????????????<option>IPhone6s</option> ???????????????????????????<option>小米4</option> ???????????????????????????<option>锤子T2</option> ???????????????????????</select> ???????????????????????<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p> ???????????????????????<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p> ???????????????????</span> ???????????????????<span style="float: right;"> ???????????????????????<font color="red" face="宋体">未有商品</font><br/> ???????????????????????<select multiple="multiple" style="width: 100px;height: 200px;" id="right"> ???????????????????????????<option>三星Note3</option> ???????????????????????????<option>华为6s</option> ???????????????????????</select> ???????????????????????<p><a href="#" id="selectOneToLeft"><<</a></p> ???????????????????????<p><a href="#" id="selectAllToLeft"><<<</a></p> ???????????????????</span> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td colspan="2"> ???????????????????<input type=‘submit‘ value="修改" /> ???????????????</td> ???????????</tr> ???????</table> ???</body></html>jQuery应用实例4：下拉列表
原文地址：https://www.cnblogs.com/xuyiqing/p/8383835.html