 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jquery實(shí)現(xiàn)角色左右選擇特效</title> 
<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;} 
a,img{border:0;} 
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} 

.selectbox{width:500px;height:220px;margin:40px auto 0 auto;} 
.selectbox div{float:left;} 
.selectbox .select-bar{padding:0 20px;} 
.selectbox .select-bar select{ 
width:150px;height:200px;border:4px #A0A0A4 outset;padding:4px; 
} 
.selectbox .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;} 
</style> 

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
//移到右邊 
$('#add').click(function(){ 
//獲取選中的選項(xiàng)，刪除并追加給對(duì)方 
$('#select1 option:selected').appendTo('#select2'); 
}); 

//移到左邊 
$('#remove').click(function(){ 
$('#select2 option:selected').appendTo('#select1'); 
}); 

//全部移到右邊 
$('#add_all').click(function(){ 
//獲取全部的選項(xiàng),刪除并追加給對(duì)方 
$('#select1 option').appendTo('#select2'); 
}); 

//全部移到左邊 
$('#remove_all').click(function(){ 
$('#select2 option').appendTo('#select1'); 
}); 

//雙擊選項(xiàng) 
$('#select1').dblclick(function(){ //綁定雙擊事件 
//獲取全部的選項(xiàng),刪除并追加給對(duì)方 
$("option:selected",this).appendTo('#select2'); //追加給對(duì)方 
}); 

//雙擊選項(xiàng) 
$('#select2').dblclick(function(){ 
$("option:selected",this).appendTo('#select1'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="selectbox"> 
<div class="select-bar"> 
<select multiple="multiple" id="select1"> 
<option value="超級(jí)管理員">超級(jí)管理員</option> 
<option value="普通管理員">普通管理員</option> 
<option value="信息發(fā)布員">信息發(fā)布員</option> 
<option value="財(cái)務(wù)管理員">財(cái)務(wù)管理員</option> 
<option value="產(chǎn)品管理員">產(chǎn)品管理員</option> 
<option value="資源管理員">資源管理員</option> 
<option value="管理員">管理員</option> 
</select> 
</div> 

<div class="btn-bar"> 
<span id="add"><input type="button" class="btn" value=">"/></span><br /> 
<span id="add_all"><input type="button" class="btn" value=">>"/></span><br /> 
<span id="remove"><input type="button" class="btn" value="<"/></span><br /> 
<span id="remove_all"><input type="button" class="btn" value="<<"/></span> 
</div> 

<div class="select-bar"><select multiple="multiple" id="select2"></select></div> 
</div> 
</body> 
</html> 