javascriptボタンの第3バージョンを上下に移動します.

8502 ワード
JavaScript apache jsp bean struts
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>
				    	&nbsp; </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>				   
				    	&nbsp;&nbsp; <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>				   
				    	&nbsp;&nbsp; <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()"/>
				      &nbsp;&nbsp;&nbsp;
				       
				  </tr>
						</table>
					</form>
				</td>
			</tr>
		</table>
	</div>
  </body>
</html:html>
Javascriptにおけるクラスの定義