<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><html xmlns="http://www.w3.org /1999/xhtml"> <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;高さ:30ピクセル;マージントップ:10px;カーソル:ポインター;} <br></style> <br><br><script type="text/javascript" <BR>src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </スクリプト> <br><script type="text/javascript"> <br>$(function(){ <br>//右边へ移動 <br>$('#add').click(function(){ <br>//获取选中の选项，删除并追加给对方 <br>$('#select1 option:selected').appendTo('#select2'); <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 オプション').appendTo('#select1' ); <br>}); <br><br>//双击选项 <br>$('#select1').dblclick(function(){ //绑定双击イベント <br>//获取全部,删除并追加给对方 <br>$("option:selected",this).appendTo('#select2') //追加给对方 <br><br>//双击选项 <br>$('#select2').dblclick(function(){ <br>$("option:selected",this).appendTo('#select1'); <br>}); <br></script> <br></head> <br> <br><div class="selectbox"> <br><div class="select-bar"> <br><select multiple="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> <br><br><div class="select-bar"><select multiple="multiple" id="select2"></select></div> <br> <br></body> <br></html> <br><br>
