这个例子是上移下移按钮功能(改进版)
888.html
这个例子可以直接使用。需要注意的是里面的select option中的 1 2 的数据是从数据库中取得的。详情请看 博客中相关 帖子
这个例子可以直接使用。需要注意的是里面的select option中的 1 2 的数据是从数据库中取得的。详情请看 博客中相关 帖子
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<html:base />
<title>agentAdd.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="../css/admin.css" type="text/css" rel="stylesheet" />
<link href="../../css/body.css" type="text/css" rel="stylesheet" />
<link href="agent.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="menu.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
</head>
<script language="javascript">
function selChange(selValue) {
if (selValue == 0) {
document.getElementById("manager1").style.display = "";
document.getElementById("agent1").style.display = "none";
} else {
document.getElementById("manager1").style.display = "none";
document.getElementById("agent1").style.display = "";
}
}
function Moveup() { //将列表项往上移动
var listObj = document.getElementById("agent");
for(var i = 0; i < listObj.options.length; i++) { //遍历列表项
if (listObj.options[i].selected && listObj.options[i] != "" && listObj. options[i] != listObj.options[0]) {
var tmpval1 = listObj.options[i].value; //获取当前项的值
var tmpval12 = listObj.options[i].text; //获取当前项的文本
listObj.options[i].value = listObj.options[i - 1].value; //获取上一项的值
listObj.options[i].text = listObj.options[i - 1].text //获取上一项的文本
listObj.options[i-1].value = tmpval1; //实现上下值的互换
listObj.options[i-1].text = tmpval12; //实现上下文本的互换
listObj.options[i].selected=false;
listObj.options[i-1].selected=true;
break;
}
}
}
function Movedown() { //将列表项往下移动
var listObj = document.getElementById("agent");
for(var i = 0; i < listObj.options.length; i++) {
if (listObj.options[i].selected && listObj.options[i] != "" && listObj.options[i+1] != listObj.options[listObj.options.length]) {
var tmpval1 = listObj.options[i].value; //获取当前项的值
var tmpval12 = listObj.options[i].text; //获取当前项的文本
listObj.options[i].value = listObj.options[i+1].value; //获取下一项的值
listObj.options[i].text = listObj.options[i+1].text //获取下一项的文本
listObj.options[i+1].value = tmpval1; //实现上下值的互换
listObj.options[i+1].text = tmpval12; //实现上下文本的互换
listObj.options[i].selected=false;
listObj.options[i+1].selected=true;
break;
}
}
}
function Moveup2() { //将列表项往上移动
var listObj = document.getElementById("manager");
for(var i = 0; i < listObj.options.length; i++) { //遍历列表项
if (listObj.options[i].selected && listObj.options[i] != "" && listObj. options[i] != listObj.options[0]) {
var tmpval1 = listObj.options[i].value; //获取当前项的值
var tmpval12 = listObj.options[i].text; //获取当前项的文本
listObj.options[i].value = listObj.options[i - 1].value; //获取上一项的值
listObj.options[i].text = listObj.options[i - 1].text //获取上一项的文本
listObj.options[i-1].value = tmpval1; //实现上下值的互换
listObj.options[i-1].text = tmpval12; //实现上下文本的互换
listObj.options[i].selected=false;
listObj.options[i-1].selected=true;
break;
}
}
}
function Movedown2() { //将列表项往下移动
var listObj = document.getElementById("manager");
for(var i = 0; i < listObj.options.length; i++) {
if (listObj.options[i].selected && listObj.options[i] != "" && listObj.options[i+1] != listObj.options[listObj.options.length]) {
var tmpval1 = listObj.options[i].value; //获取当前项的值
var tmpval12 = listObj.options[i].text; //获取当前项的文本
listObj.options[i].value = listObj.options[i+1].value; //获取下一项的值
listObj.options[i].text = listObj.options[i+1].text //获取下一项的文本
listObj.options[i+1].value = tmpval1; //实现上下值的互换
listObj.options[i+1].text = tmpval12; //实现上下文本的互换
listObj.options[i].selected=false;
listObj.options[i+1].selected=true;
break;
}
}
}
</script>
<body bgcolor="#8CBAEB" onLoad="addOnload('${requestScope.message}')">
<div class="div_main" >
<table width="400px" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr >
<td class="div_title" >菜单配置</td>
</tr>
<tr >
<td class="div_body" bgcolor="F8FCFD">
<form id="main" action="../../../system.do" method="post">
<input type=hidden name=method id=method value="add">
<table class="div_table" bgcolor="F8FCFD" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#E0E0E0" >
<tr>
<td width="17%" align="center" valign="top">类型：</td>
<td width="34%" align="left">
<select name="type" onclick="selChange(this.value)">
<option value="1">坐席</option>
<option value="0">管理</option>
</select>
</td>
</tr>
<table>
<tr>
<td width="17%" align="center" valign="top">菜单配置列表：</td>
<td width="34%" align="left">
<div id="agent1">
<select name="agent" size="5" multiple="multiple">
<option>1</option>
<option>11</option>
<option>111</option>
</select>
<label>
<input type="button" name="button" value="上移" onClick="Moveup()">
</label>
<label>
<input type="button" name="button" value="下移" onClick="Movedown()">
</label>
</div>
<div id="manager1" style="display: none">
<select name="manager" size="5" multiple="multiple" >
<option>2</option>
<option>22</option>
<option>222</option>
</select>
<label>
<input type="button" name="button" value="上移" onClick="Moveup2()">
</label>
<label>
<input type="button" name="button" value="下移" onClick="Movedown2()">
</label>
</div>
</td>
</tr>
</table>
<tr>
<td height="30" colspan="2" align="center"><input name="Submit" type="submit" class="button1" value="提 交" onClick="return add()"/>
<input name="Submit2" type="button" class="button1" value="返 回" onClick="toMain()"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
</html:html>