`
qmug
  • 浏览: 201552 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript 上下移 按钮 第三版本

阅读更多
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上下无缝图片滚动

    在这个效果中,图片会按照设定的方向(本例为上下)连续滚动,当最后一张图片滚动出视图后,第一张图片会立即接续,从而实现“无缝”过渡,给用户带来流畅的浏览体验。 要实现这样的效果,主要涉及以下几个关键知识...

    table表格内容上下移动的三种实现方法

    第三种方法涉及服务器端编程,通常用于需要保存数据顺序的情况。用户触发上移或下移操作后,前端发送Ajax请求到服务器,服务器根据请求改变数据的顺序,然后再返回更新后的数据,前端刷新表格内容。这种方法适用于...

    3态按钮控件(带源)

    在按钮控件的上下文中,"3态"通常指的是按钮的三种可选状态:常态、激活态和第三态。常态通常是按钮的基本外观,激活态通常表示用户已与按钮交互(如鼠标悬停或点击),而第三态则表示一种特殊或中间的状态。例如,...

    程序天下:JavaScript实例自学手册

    第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...

    javaScript+html实现表格上下移动.zip

    6. **事件处理**:为了提供良好的用户体验,可能还需要处理一些特殊情况,如当尝试向上移动第一行或向下移动最后一行时,给出适当的提示或禁用移动按钮。 此外,为了增强交互性,可以考虑使用AJAX技术,这样在用户...

    《程序天下:JavaScript实例自学手册》光盘源码

    第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...

    JS实现的点击按钮图片上下滚动效果示例

    在这个函数中,我们首先获取到两个按钮元素和所有颜色块元素的引用,然后分别为第二个按钮添加点击事件监听器。 点击事件监听器的回调函数中,对每个颜色块执行循环操作。每次点击按钮2,颜色块的`top`属性会减少...

    纯css3背景渐变按钮特效.zip

    CSS3是层叠样式表的第三版,它引入了许多新的特性和功能,其中就包括丰富的颜色过渡和渐变效果。这个项目可能包含了一系列不同设计风格的按钮,利用CSS3的属性来实现视觉上的吸引力和交互性。 【描述解读】 "纯css3...

    javascript键盘上下键的操作(选择)

    ### JavaScript键盘上下键的操作(选择) #### 知识点概览 本文将详细介绍如何使用JavaScript来监听键盘事件,并根据用户的上下箭头按键操作来选择表格中的行或改变其背景色。我们将通过两个示例代码来具体说明这一...

    javascript 图片切换,自动切换。

    本文将深入探讨如何使用JavaScript实现自动切换和上下页转换的图片轮播效果。 首先,我们要创建HTML结构,包含一个图片容器和控制按钮,如下所示: ```html 图片1.jpg" alt="图片1" class="active"&gt; 图片2.jpg...

    css,JavaScript,html实现页面图片点击打开在灯箱中显示,背景黑色60%,单击上、下按钮切换页面相应图片

    在切换图片时,需要考虑到边界情况,如当当前图片是第一张时,点击上一张按钮应该显示最后一张,反之亦然。此外,还可以添加关闭灯箱的功能,比如点击背景层或者按下ESC键。 为了增强用户体验,可以添加过渡效果,...

    jQuery图片切换显示隐藏左右按钮控制图片-20130626

    3. 显示与隐藏:在描述中提到的“显示隐藏左右按钮”,指的是在图片切换时,左右箭头(或按钮)的可见性会根据当前图片的位置进行调整。例如,当当前图片为第一张时,左箭头可能隐藏;最后一张时,右箭头隐藏。 4. ...

    JavaScript网页特效范例宝典源码

    第3章 实用JavaScript函数 129 3.1 数据验证 130 实例084 通过正则表达式验证日期 130 实例085 验证输入的日期格式是否正确 132 实例086 检查表单元素是否为空 134 实例087 验证E-mail是否正确 135 实例088 通过正则...

    网贷网站文本向上轮播,能上下翻页和按钮控制flash文件

    对于“网贷网站文本向上轮播”,开发者现在可能会选择使用JavaScript库,如jQuery或React,配合CSS3的动画效果来实现。这种方式不仅可以实现与Flash相似的功能,而且更轻量级、更易于维护,并且不需要用户安装额外的...

    锁屏代码javascript

    - 防止键盘记录和屏幕截图,这可能需要利用浏览器API或者第三方库来实现。 总结来说,JavaScript锁屏代码是通过结合HTML、CSS和JavaScript技术,为网页或应用程序提供临时的屏幕保护功能。通过理解这些基本原理并...

    jquery table 上下行移动互换

    在实际应用中,可能还需要考虑行的边界条件,例如当试图将第一行上移或最后一行下移时,应防止出现无效的操作。此外,为了提供更好的用户体验,可以考虑添加一些视觉反馈,比如禁用无法操作的按钮,或者在交换行时...

    图片无缝左右+上下滚动

    CSS3中的`transform`属性也可以用来实现图片的平移,通过改变`translateX`或`translateY`值,可以实现左右或上下滚动。结合`animation`属性,可以创建更复杂的动画效果,如循环滚动、暂停和恢复等。 在实际应用中,...

    JS控制HTMLDOM表格行上下移动

    - **上移**:将一行元素移至前一行之前,需要先检查当前行是否为第一行。如果不是,可以先删除当前行,然后在其前一个兄弟元素之前插入。 - **下移**:类似地,检查当前行是否为最后一行。如果不是,删除当前行后...

    类似日历包括上下翻页月份

    3. **JavaScript/jQuery 初始化**:在页面加载完成后,使用jQuery选择器获取日历元素,并设置初始状态,如当前月份和年份。 4. **事件监听**:添加点击事件监听器到翻页按钮,当用户点击“上一页”或“下一页”,...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的网页空间可以展示更多的图片信息,同时保持页面布局的整洁。在JavaScript中...

Global site tag (gtag.js) - Google Analytics