JQuery 权限管理界面
<!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>
<title></title>
<link rel="stylesheet" type="text/css" href="Css/Commom.css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
//获取id为Select1 下的option 并且是选中状态的进行移除；
var items = $("#Select1 option:selected").remove();
//获取id为Select2，通过append方法，进行填充；
$("#Select2").append(items);
});
$("#Button2").click(function () {
//获取id为Select2 下的option 并且是选中状态的进行移除；
var items = $("#Select2 option:selected").remove();
//获取id为Select1，通过append方法，进行填充；
$("#Select1").append(items);
});
$("#Button3").click(function () {
var items = $("#Select1 option").remove();
$("#Select2").append(items);
});
$("#Button4").click(function () {
var items = $("#Select2 option").remove();
$("#Select1").append(items);
});
});
</script>
</head>
<body>
<div class="column">
<select id="Select1" multiple="multiple" style="width: 70px; height: 150px; border: 1px solid #000;
float: left;">
<option>备份数据</option>
<option>删除文章</option>
<option>恢复文章</option>
<option>移动文章</option>
<option>管理留言</option>
</select>
<ul style="float: left;">
<li>
<input id="Button1" type="button" value=">" /></li>
<li>
<input id="Button2" type="button" value="<" /></li>
<li>
<input id="Button3" type="button" value=">>" /></li>
<li>
<input id="Button4" type="button" value="<<" /></li>
</ul>
<select id="Select2" multiple="multiple" style="width: 70px; height: 150px; border: 1px solid #000;">
</select>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Css/Commom.css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
//获取id为Select1 下的option 并且是选中状态的进行移除；
var items = $("#Select1 option:selected").remove();
//获取id为Select2，通过append方法，进行填充；
$("#Select2").append(items);
});
$("#Button2").click(function () {
//获取id为Select2 下的option 并且是选中状态的进行移除；
var items = $("#Select2 option:selected").remove();
//获取id为Select1，通过append方法，进行填充；
$("#Select1").append(items);
});
$("#Button3").click(function () {
var items = $("#Select1 option").remove();
$("#Select2").append(items);
});
$("#Button4").click(function () {
var items = $("#Select2 option").remove();
$("#Select1").append(items);
});
});
</script>
</head>
<body>
<div class="column">
<select id="Select1" multiple="multiple" style="width: 70px; height: 150px; border: 1px solid #000;
float: left;">
<option>备份数据</option>
<option>删除文章</option>
<option>恢复文章</option>
<option>移动文章</option>
<option>管理留言</option>
</select>
<ul style="float: left;">
<li>
<input id="Button1" type="button" value=">" /></li>
<li>
<input id="Button2" type="button" value="<" /></li>
<li>
<input id="Button3" type="button" value=">>" /></li>
<li>
<input id="Button4" type="button" value="<<" /></li>
</ul>
<select id="Select2" multiple="multiple" style="width: 70px; height: 150px; border: 1px solid #000;">
</select>
</div>
</body>
</html>
