业务场景：权限分配左右选择器。左侧下拉多选框为待分配权限，右侧为已选中权限。借助jQuery，用简短代码实现选项移动。 功能点：
>：移动左侧选中项到右侧<：移动右侧选中项到左侧>>：全部移到右侧<<：全部移到左侧
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm25.aspx.cs" Inherits="WebApplication1.WebForm25" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script type="text/javascript">
$(function () {
// > 选中项移到右边
$(":button[value='>']").click(function () {
$("#left option:selected").remove().appendTo($('#right'));
});
// < 选中项移到左边
$(":button[value='<']").click(function () {
$("#right option:selected").remove().appendTo($('#left'));
});
// >> 全部移到右边
$(":button[value='>>']").click(function () {
$("#left option").remove().appendTo($('#right'));
});
// << 全部移到左边
$(":button[value='<<']").click(function () {
$("#right option").remove().appendTo($('#left'));
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="multiple" size="8" style="width:250px;">
<option>管理</option>
<option>新增</option>
<option>删除</option>
<option>修改</option>
<option>审批</option>
</select>
</td>
<td>
<input type="button" value=">" /><br />
<input type="button" value="<" /><br />
<input type="button" value=">>" /><br />
<input type="button" value="<<" />
</td>
<td>
<select id="right" multiple="multiple" size="8" style="width:250px;">
</select>
</td>
</tr>
</table>
</body>
</html>
Code language: HTML, XML (xml)说明：
option:selected：表单选择器，获取当前选中的optionremove().appendTo()：把选中选项从原select移除，追加到目标select，实现移动multiple：select开启多选；按住Ctrl可以多选多条权限
Previous: 使用JQUERY动态生成表单文本框
Next: 完成一个加法功能使用到类型转换功能