>
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 ');
});
});
腳本>
頭>
;
;
資訊發佈員選項>
;
;
;
;
選擇>
>
;
>
