<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery implements role-left and left-right special effects</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, "New Song";}
.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="/ajax/libs/jquery/1.7.2/"></script>
<script type="text/javascript">
$(function(){
//Move to the right
$('#add').click(function(){
//Get the selected option, delete and append to the other party
$('#select1 option:selected').appendTo('#select2');
});
//Move to the left
$('#remove').click(function(){
$('#select2 option:selected').appendTo('#select1');
});
//Move all to the right
$('#add_all').click(function(){
//Get all options, delete and append to the other party
$('#select1 option').appendTo('#select2');
});
//Move all to the left
$('#remove_all').click(function(){
$('#select2 option').appendTo('#select1');
});
//Double-click on the option
$('#select1').dblclick(function(){ //Bind double-click event
//Get all options, delete and append to the other party
$("option:selected", this).appendTo('#select2'); //Add to the other party
});
//Double-click on the option
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="selectbox">
<div class="select-bar">
<select multiple="multiple" >
<option value="Super Administrator">Super Administrator</option>
<option value="ordinary administrator">ordinary administrator</option>
<option value="Information Publisher">Information Publisher</option>
<option value="Financial Administrator">Financial Administrator</option>
<option value="Product Administrator">Product Administrator</option>
<option value="Resource Administrator">Resource Administrator</option>
<option value="Administrator">Administrator</option>
</select>
</div>
<div class="btn-bar">
<span ><input type="button" class="btn" value=">"/></span><br />
<span ><input type="button" class="btn" value=">>"/></span><br />
<span ><input type="button" class="btn" value="<"/></span><br />
<span ><input type="button" class="btn" value="<<"/></span>
</div>
<div class="select-bar"><select multiple="multiple" ></select></div>
</div>
</body>
</html>