Jquery实现的角色左右选择特效 - Web前端

作者：98wpeu发布时间：2026-07-19分类：网页前端技术浏览：25

导读：复制代码代码如下:<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metaHTTP-eqUIv...

复制代码代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metaHTTP-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 class="selectbox">
<div class="select-bar">
<select multiple="multiple" id="select1">
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</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>

标签：特效角色 Web Jquery

上一篇：jQuery 中国省市两级联动选择附图 - Web前端
下一篇：jQuery分别获取选中的复选框值的示例 - Web前端

Jquery实现的角色左右选择特效 - Web前端

相关推荐