<div class="codetitle"> <span><a style="CURSOR: pointer" data="18163" class="copybut" id="copybut18163" onclick="doCopy('code18163')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code18163"> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>Jquery实现角色左右选择特效</title> <br><style type="text/css"> <BR>*{margin:0;padding:0;list-style-type:none;} <BR>a,img{border:0;} <BR>body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} <br><br>.selectbox{width:500px;height:220px;margin:40px auto 0 auto;} <BR>.selectbox div{float:left;} <BR>.selectbox .select-bar{padding:0 20px;} <BR>.selectbox .select-bar select{ <BR>width:150px;height:200px;border:4px #A0A0A4 outset;padding:4px; <BR>} <BR>.selectbox .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;} <BR></style> <br><br><script type="text/javascript">src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <br><script type="text/javascript"> <BR>$(function(){ <BR>//移到右边 <BR>$('#add').click(function(){ <BR>//获取选中的选项，删除并追加给对方 <BR>$('#select1 option:selected').appendTo('#select2'); <BR>}); <br><br>//移到左边 <BR>$('#remove').click(function(){ <BR>$('#select2 option:selected').appendTo('#select1'); <BR>}); <br><br>//全部移到右边 <BR>$('#add_all').click(function(){ <BR>//获取全部的选项,删除并追加给对方 <BR>$('#select1 option').appendTo('#select2'); <BR>}); <br><br>//全部移到左边 <BR>$('#remove_all').click(function(){ <BR>$('#select2 option').appendTo('#select1'); <BR>}); <br><br>//双击选项 <BR>$('#select1').dblclick(function(){ //绑定双击事件 <BR>//获取全部的选项,删除并追加给对方 <BR>$("option:selected",this).appendTo('#select2'); //追加给对方 <BR>}); <br><br>//双击选项 <BR>$('#select2').dblclick(function(){ <BR>$("option:selected",this).appendTo('#select1'); <BR>}); <BR>}); <BR></script> <br> <br> <br><div class="selectbox"> <br><div class="select-bar"> <br><select multiple id="select1"> <br><option value="超级管理员">超级管理员</option> <br><option value="普通管理员">普通管理员</option> <br><option value="信息发布员">信息发布员</option> <br><option value="财务管理员">财务管理员</option> <br><option value="产品管理员">产品管理员</option> <br><option value="资源管理员">资源管理员</option> <br><option value="管理员">管理员</option> <br></select> <br> </div> <br><br><div class="btn-bar"> <br><span id="add"><input type="button" class="btn" value=">"></span><br> <br><span id="add_all"><input type="button" class="btn" value=">>"></span><br> <br><span id="remove"><input type="button" class="btn" value="<"></span><br> <br><span id="remove_all"><input type="button" class="btn" value="<<"></span> <br> </div> <br><br><div class="select-bar"><select multiple id="select2"></select></div> <br> </div> <br> <br> <br> </div>
