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

最新推荐文章于 2022-07-23 13:33:31 发布
最新推荐文章于 2022-07-23 13:33:31 发布
阅读量594 收藏
点赞数
分类专栏： 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>
				    	  </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>
qf_hy
关注
专栏目录
Qt创建列表，通过外部按钮控制列表的选中下移、上移以及左侧图标的显现
肩上风骋的博客
07-17 771
项目中需要使用列表QListWidget，但是不能直接拿来使用。需要创建一个列表，通过向上和向下的按钮来向上或者向下移动选中列表项，当当前项背选中再去点击确认按钮，会在列表项的前面出现一个图标。
html怎么移动按钮位置,CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)
weixin_36044132的博客
06-07 2713
CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)导航按钮位于图像标题div的顶部。 两者都悬停下降。 当转到下一个图像时，导航按钮位于正确的位置，但是当您单击上一个时，整个导航屏幕将移至右下角！nav {position: absolute;width: 100%height: 20px;padding-bottom: 2px;z-index: 1...
后台上移下移，编辑，删除效果
01-25
插件描述：jq的灵活运用后台上移下移，编辑，删除效果。 参考实例：http://www.jq22.com/jquery-info5692
这个例子是上移下移按钮功能
古寒居
09-03 567
这个例子是上移下移功能 [code="java"] 无标题文档 姓名 数学 历史 外语 总分 &nbsp; ...
第5篇 上移字段
xupeihuagudulei的专栏
03-22 915
今天我们来看看一个和上移方法十分类似的重构，我们处理的不是方法，而是字段。 重构前:public abstract class Account{}public class CheckingAccount:Account{ private decimal _minimumCheckingBalance = 5m;}public class Savings
HTML怎么把按钮往下移,css按钮固定在底部
weixin_33345728的博客
06-03 5325
CSS如何把DIV永远置于页面的底部position:fixed; bottom:0; 这个方法简单好用。 运用这个CSS把DIV永远置于页面的底部 利用绝对定位，然后设置底部距离为0。 这个div如果位置在所有div的后面，那么只要前面的div 的高度够高的话，它的位置就会在页面的页面的底部的。怎样把button放在屏幕底部目前介绍一下css写法，固定在浏览器的下边的button{positio...
用javascript写个俄罗斯方块
最新发布
08-10
### 回答1： 可以使用JavaScript来编写俄罗斯方块游戏。首先，需要使用canvas元素在网页上绘制游戏界面。...这个简单的版本可以带给玩家娱乐与挑战，并且可以按照个人喜好进行进一步的改进和优化。
《浏览器工作原理与实践》学习笔记
weixin_48391468的博客
02-20 1348
浏览器原理 前言 本文是学习**李兵老师的《浏览器工作原理与实践》**过程中记录笔记，详细链接见文末 进程vs线程 进程：一个应用程序的运行实例就是一个进程，详细来说就是：启动一个应用程序的时候，操作系统会为该程序分配一片内存空间，用来存放代码、数据和一个主线程，这样的运行环境就称为一个进程 线程：依附于进程，多个线程并行可以提高运行效率 进程和线程之间的几个特点 1.进程中的任意一个线程执行出错，都会导致进程崩溃 2.线程之间共享父进程的数据 3.当进程关闭的时候，整个进程的资源都会被回收 4.进程之间的
前端Reract面试题-------总结（经典）
LVHA529的博客
01-04 620
1.React中keys的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( ‹ul› { this.state.list.map(({item, key}) =› { return ‹li key={key}›{item}‹/li› }) } ‹/ul› ) } 在开发过程中，我们需要保证某个元素的 key 在其同级元...
基于Java的俄罗斯方块游戏的设计与实现(含源文件)
热门推荐
【完整】
03-07 1万+
欢迎添加微信互相交流学习哦！ 项目源码：https://gitee.com/oklongmm/biye 基于Java的俄罗斯方块游戏的设计与实现 摘 要 俄罗斯方块是一款风靡全球，从一开始到现在都一直经久不衰的电脑、手机、掌上游戏机产品，是一款游戏规则简单，但又不缺乏乐趣的简单经典小游戏，上手容易，适用范围广泛，人所共知。俄罗斯方块游戏简单的基本规则是有小方块组成的7种不同的规则图形陆续从屏幕上落下，玩家操作移动使其下落拼出一条完整的横条，随即会消失，玩家得分，游戏等级提高，当没有被消除的...
专升本信息技术
Hello_world_go的博客
04-24 1万+
专升本信息技术
添加、删除、上移、下移div
10-17
通过按钮对div的操作，可添加div，删除，移动div，使用了jq
html点击按钮整体窗口下移,html – CSS：单击时按钮文本移动
weixin_35772723的博客
05-31 932
.btn_style{border: none;outline: 0;background: #edf1f2;border-radius: 2px;width: 90px;height: 30px;}.btn_style:focus{border: thin #c7d3d6 solid;width: 90px;height: 30px;outline: 0 !important;}Medium当我...
Vue3+element-plus 表格实现上移下移排序
A_9888的博客
02-18 1619
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-02-18 10:16:09 * @LastEditTime: 2022-02-18 14:48:10 * @LastEditors: Ran junlin --> <template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di
ant-design-vue 上下移动表格的行
wwll177的博客
02-22 1214
<a-table id="tt" size="small" bordered rowKey=" planId" :columns="columnsPro" :dataSource="dataPro" :pagination="false" :loading="loading" ...
HTML-13 原生响应式，动画上移效果
m0_59214979的博客
12-13 1735
本节：最完美的响应式，两个并列的情况，一个完全铺满的情况；动画效果。 一、响应式 1. 一整行的div上设置 flex-wrap:warp ,超过页面大小div就自动换行 2. 在@media screen and (max-width: 750px){} 里面重新定义屏幕缩放之后的div属性 即可响应，设置两个情况。 二、动画效果 （1.）按钮本来是不存在，一碰又出现了 原来按钮div设置display: none;//不显示，...
jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏
weixin_45591598的博客
07-23 1066
代码】jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏。
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
weixin_39634132的博客
11-25 587
按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？转载链接: https://github.com/XboxYan/notes/issues/16通常这类效果第一反应可能就是借助canvas了，比如下面这个案例点击预览(建议去codepen原链接点击预览访问，segmentfault内置的预览js会加载失败)效果就更加震撼了...
WPF ListBox实现数据源上移下移功能
在WPF (Windows Presentation Foundation) 中，实现ListBox（列表框）的上移和下移功能通常用于用户界面的动态管理，允许用户对列表中的项目进行排序或调整顺序。 ListBox 是一种控件，用于显示数据集合，通过数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值