本文主要是介绍jQuery实现select下拉框左右选择_交换内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- jquery角色左右选择框，把左侧的内容选择后显示在右边，可修改成角色选择器。适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游等，本人不太喜欢苹果的产品，所以没有考虑Safari浏览器的兼容性，暂不支持Safari浏览器。代码里的JS部分，补上了注释，方便大家使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery角色左右选择框</title>
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
#one{width:200px; height:180px; float:left}
#two{width:50px; height:180px; float:left}
#three{width:200px; height:180px; float:left}
.btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}
</style>
<script type="text/javascript">
//下拉框交换JQuery
$(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>
<br />
<br />
<table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab"><tr><th> </th><td><div><div><select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; "><option value="超级管理员">超级管理员</option><option value="普通管理员">普通管理员</option><option value="信息发布员">信息发布员</option><option value="财务管理员">财务管理员</option><option value="产品管理员">产品管理员</option><option value="资源管理员">资源管理员</option><option value="管理员">管理员</option></select></div><div style="float:left"> <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><select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;"></select></div></div></td></tr>
</table>
<div style="text-align:center;clear:both">
</div>
</body>
</html>这篇关于jQuery实现select下拉框左右选择_交换内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
