需求
如上图，实现左右两边的选择菜单可以左右移动，‘>’按钮一次只能移动被选中的一个菜单，‘>>’按钮一次移动所有被选择的菜单，‘>>>’按钮
将所有菜单进行移动，不管是否被选择。
代码实现
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 ????<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 ????<script type="text/javascript"> 8 ????????$(function(){ 9 ????????????$("#left1").click(function(){10 ????????????????$("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId"));11 ????????????});12 ????????????$("#left2").click(function(){13 ????????????????$("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId"));14 ????????????});15 ????????????$("#left3").click(function(){16 ????????????????$("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId"));17 ????????????});18 19 ????????????$("#right1").click(function(){20 ????????????????$("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId"));21 ????????????});22 ????????????$("#right2").click(function(){23 ????????????????$("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId"));24 ????????????});25 ????????????$("#right3").click(function(){26 ????????????????$("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId"));27 ????????????});28 ????????});29 ????</script>30 ????31 ????<style type="text/css">32 ????????.textClass {33 ????????????background-color: #ff0000;34 ????????}35 ????</style>36 </head>37 <body>38 ????<table>39 ????????<tr>40 ????????????<td>41 ????????????????<select id="leftSelectId" style="width:100px" multiple="multiple" size="6">42 ????????????????????<option>京东商城</option>43 ????????????????????<option>苏宁易购</option>44 ????????????????????<option>淘宝</option>45 ????????????????????<option>拼多多</option>46 ????????????????</select>47 ????????????????48 ????????????</td>49 ????????????<td>50 ????????????????<input id="left1" type="button" value=">" style="width:50px"/> <br/>51 ????????????????<input id="left2" type="button" value=">>" style="width:50px"/> <br/>52 ????????????????<input id="left3" type="button" value=">>>" style="width:50px"/> <br/>53 ????????????????54 ????????????????<input type="button" id="right1" value="<" style="width:50px"/> <br/>55 ????????????????<input type="button" id="right2" value="<<" style="width:50px"/> <br/>56 ????????????????<input type="button" id="right3" value="<<<" style="width:50px"/> <br/>57 ????????????????58 ????????????</td>59 ????????????<td>60 ????????????????<select id="rightSelectId" ?style="width:100px" multiple="multiple" size="6">61 ????????????????</select>62 ????????????????63 ????????????</td>64 ????????</tr>65 ????</table>66 ????????67 </body>68 </html>jQuery--文档处理案例
原文地址：https://www.cnblogs.com/jxxblogs/p/9615059.html