Jquery實現的角色左右選擇特效_jquery

複製程式碼程式碼如下：

>


*{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;margin:40px; 0 auto;}
.selectbox div{float:left;}
. selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{
寬度:150px;高度:200px;邊框:4px #A0A0A4 開頭;padding:4px;
}
.selectbox .btn{寬度：50px;高度：30px；頂部邊距：10px}
; /style>;

src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ”> 腳本>

$(function(){
//移到右邊
$('#add').click(function (){
//取得選取的選項，刪除並追加給對方
$('#select1 option:selected').appendTo('#select2');

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

//全部移至右邊
$( '#add_all').click(function(){
//取得全部的選項，刪除並追加給對方
$('#select1 option ').appendTo('#select2');
});

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

//左側選項
$('#select1').dblclick(function(){ //綁定左側事件
//取得全部的選項,刪除並追加給對方
$("option:selected",this).appendTo('#select2'); //追加給對方
})

//側邊選項
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1 ');
});
});
腳本>
頭>

超級管理員;
普通管理員;
資訊發佈員選項>
財務管理員;
產品管理員;
資源管理員 ;
管理員;
選擇>

>

;

>

身體>