这个例子是上移下移按钮功能(改进版)

qmug

浏览: 201510 次
性别:
来自: 上海

最近访客更多访客>>

shyc

sb12345

robustwang

绕弯儿无

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Struts Apache JSP Bean 配置管理

888.html

这个例子可以直接使用。需要注意的是里面的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>
				    	&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">
						   	 <option>1</option>
						   <option>11</option>
						   <option>111</option>
						    
					    </select>
						<label>
						<input type="button" name="button" value="上移" onClick="Moveup()">
				    	</label>				   
				    	&nbsp;&nbsp; <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>				   
				    	&nbsp;&nbsp; <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()"/>
				      &nbsp;&nbsp;&nbsp;
				       <input name="Submit2" type="button" class="button1" value="返 回" onClick="toMain()"/></td>
				  </tr>
						</table>
					</form>
				</td>
			</tr>
		</table>
	</div>
  </body>
</html:html>

2
顶

0
踩

分享到：

这个例子是上下移左右移按钮功能 | 这个例子是上移下移按钮功能

2008-09-04 13:55
浏览 2336
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

这个例子是上移下移按钮功能(改进版)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

这个例子是上移下移按钮功能(改进版)

评论

发表评论

相关推荐

JavaSript DOM总结笔记.rar

按照自己的要求打开新窗口

Javascript的document对象

6.2 实现两个select的同步

给下拉列表框数据分组

22.3 评星效果

6.13如何整合多个搜索引擎为自己所用

上下移 脚本代码 参考版

javascript 上下移 按钮 第三版本

这个例子是上下移 左右移按钮功能

JavaScript 提交和跳转的例子

文本框中只能输入数字的脚本例子2

JavaScript 中的DOM

通过文档事件处理程序引入JavaScript 脚本代码实例

添加号码的例子

JavaScript教程

如何调试javascript

JavaScript学习（1）

输入验证的例子

常用的脚本验证方法

最近访客更多访客>>

上下移脚本代码参考版

javascript 上下移按钮第三版本

这个例子是上下移左右移按钮功能