javascript 上下移按钮第三版本

最新推荐文章于 2022-09-04 20:34:00 发布

最新推荐文章于 2022-09-04 20:34:00 发布 · 255 阅读

文章标签：

#JavaScript #Struts #JSP #Apache #Bean #ViewUI

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个基于Java的Web应用程序中的菜单配置功能实现方法。通过使用JavaScript进行客户端交互控制，根据选择的不同用户类型（管理或坐席），动态显示相应的权限配置选项。同时实现了列表项的上移和下移功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

menu.js文件


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(listObj) {                              //将列表项往上移动
	//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(listObj) {                            //将列表项往下移动
	//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;

         }
    }
}

menu.jsp文件
select中的是从数据库中读取的


<%@ 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>menuManager.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>

  <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">
						   	<c:forEach var="group" items="${requestScope.agentList}" varStatus="status">
							    <option value="${group.pid}">${group.privilegeName}</option>
						    </c:forEach>


					    </select>
						<label>
						<input type="button" name="button" value="上移" onclick="Moveup(agent)">
				    	</label>				   
				    	   <label>
				    	<input type="button" name="button" value="下移" onclick="Movedown(agent)">
				    	</label>
				</div>		    

				<div  id="manager1"  style="display: none">
						<select name="manager" size="5" multiple="multiple" >
						   	<c:forEach var="group" items="${requestScope.managerList}" varStatus="status">
							    <option value="${group.pid}">${group.privilegeName}</option>
						    </c:forEach>
						</select>
						 <label>
						<input type="button" name="button" value="上移" onclick="Moveup(manager)">
				    	</label>				   
				    	   <label>
				    	<input type="button" name="button" value="下移" onclick="Movedown(manager)">
				    	</label>
				</div>	



				    </td>
				  </tr>
				  </table>


				  <tr>
				    <td height="30" colspan="2" align="center"><input name="Submit" type="submit" class="button1" value="提 交" onclick="return update()"/>
				         

				  </tr>
						</table>
					</form>
				</td>
			</tr>
		</table>
	</div>
  </body>
</html:html>