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

2024-05-06 16:06:21

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了Jquery實現的角色左右選擇特效,需要的朋友可以參考下

復制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery實現角色左右選擇特效</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(){
//獲取選中的選項，刪除并追加給對方
$('#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');
});
});
</script>
</head>
<body>
<div>
<div>
<select multiple="multiple">
<option value="超級管理員">超級管理員</option>
<option value="普通管理員">普通管理員</option>
<option value="信息發布員">信息發布員</option>
<option value="財務管理員">財務管理員</option>
<option value="產品管理員">產品管理員</option>
<option value="資源管理員">資源管理員</option>
<option value="管理員">管理員</option>
</select>
</div>

<div>
<span><input type="button" value=">"/></span><br />
<span><input type="button" value=">>"/></span><br />
<span><input type="button" value="<"/></span><br />
<span><input type="button" value="<<"/></span>
</div>

<div><select multiple="multiple"></select></div>
</div>
</body>
</html>