移动option标签
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>导出设置</title>
<link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.4.2.js"></script>
<script type="text/javascript" > /**
function Add() { allRoles = document.getElementById("colname1");
selectRoles = document.getElementById("colname2"); for(var i =0;i<allRoles.options.length;i++){
if(allRoles.options[i].selected==true){
selectRoles.options.add( new Option(allRoles.options[i].text,allRoles.options[i].value));
allRoles.remove(i);
i--;
}
} } function Remove() { allRoles = document.getElementById("colname1");
selectRoles = document.getElementById("colname2"); for(var i =0;i<selectRoles.options.length;i++){
if(selectRoles.options[i].selected==true){
allRoles.options.add( new Option(selectRoles.options[i].text,selectRoles.options[i].value));
selectRoles.remove(i);
i--;
}
}
}
function upcol() { var rightcol = document.getElementById("colname2");
var selectflag=0; for(var i =0;i<rightcol.options.length;i++){ if(rightcol.options[i].selected==true && i!=0){ var temptext=rightcol.options[i].text;
var tempvalue=rightcol.options[i].value; rightcol.options[i].value=rightcol.options[i-1].value;
rightcol.options[i].text=rightcol.options[i-1].text;
rightcol.options[i-1].value=tempvalue;
rightcol.options[i-1].text=temptext; selectflag=i-1;
break; //这个标志表明目前只能一次移一行，不支持多选
}
} for(var i =0;i<rightcol.options.length;i++){
rightcol.options[i].selected=false;
}
rightcol.options[selectflag].selected=true;
}
function downcol() { var rightcol = document.getElementById("colname2");
var selectflag=0; for(var i=0;i<rightcol.options.length;i++){ if(rightcol.options[i].selected==true && i!=rightcol.options.length-1){ var temptext=rightcol.options[i].text;
var tempvalue=rightcol.options[i].value; rightcol.options[i].value=rightcol.options[i+1].value;
rightcol.options[i].text=rightcol.options[i+1].text;
rightcol.options[i+1].value=tempvalue;
rightcol.options[i+1].text=temptext; selectflag=i+1;
break; //这个标志表明目前只能一次移一行，不支持多选
}
} if(selectflag!=0){ //如果此标志为0，说明光标已经移到最下边，没有发生向下交换的行动
for(var i =0;i<rightcol.options.length;i++){
rightcol.options[i].selected=false;
}
rightcol.options[selectflag].selected=true;
}
}
*/ function Add() {
$("#colname1 option:selected").appendTo($("#colname2"));
} function Remove() {
$("#colname2 option:selected").appendTo($("#colname1"));
} function upcol() {
//获取选中的右侧option元素
var rightcol = $("#colname2 option:selected");
//option的第一个元素无法上移，rightcol.get(0)表示选中的option对象，rightcol.get(0).index表示option对象的位置索引，从0开始
if(rightcol.get(0).index!=0){
rightcol.each(function(){
$(this).prev().before($(this)); //在当前选中对象的前面插入该对象
//$(this).insertBefore($(this).prev());//等同于
});
}
}
function downcol() {
//选择所有的对象
var allrightcol = $("#colname2 option");
//选择被选中的对象
var rightcol = $("#colname2 option:selected");
//option的最后一个元素无法下移
if(rightcol.get(rightcol.length-1).index!=allrightcol.length-1){
//循环选中的对象
for(i=rightcol.length-1;i>=0;i--){
//获取选中的对象
var item = $(rightcol.get(i));
item.insertAfter(item.next()); //将选中的对象插入到下一个对象的后面
//item.next().after(item);//等同于
}
}
} function setValue(){ var rightcol = document.getElementById("colname2");
var leftcol = document.getElementById("colname1"); selectid="";
selectname="";
noselectid="";
noselectname=""; for(var m =0;m<rightcol.options.length;m++){
if(m==rightcol.options.length-1){
selectid+=rightcol.options[m].value;
selectname+=rightcol.options[m].text;
}else{
selectid+=rightcol.options[m].value +"#";
selectname+=rightcol.options[m].text +"#";
}
} for(var m =0;m<leftcol.options.length;m++){
if(m==leftcol.options.length-1){
noselectid+=leftcol.options[m].value;
noselectname+=leftcol.options[m].text;
}else{
noselectid+=leftcol.options[m].value +"#";
noselectname+=leftcol.options[m].text +"#";
}
} document.Form1.expNameList.value=selectname;
document.Form1.expFieldName.value=selectid;
document.Form1.noExpNameList.value=noselectname;
document.Form1.noExpFieldName.value=noselectid; } function checksubmit(){
setValue();
if(document.Form1.expNameList.value=="" || document.Form1.expFieldName.value==""){ alert("请至少选择一列作为导出列");
return;
} document.Form1.action="system/elecExportFieldsAction_saveSetExportExcel.do";
document.Form1.submit();
} </script>
</head> <body onload="setValue()">
<FORM id="Form1" name="Form1" method="POST" > <br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="ta_01" align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
<font face="宋体" size="2"><strong>导出字段设置</strong></font>
</td>
</tr>
<tr height=10><td></td></tr> <tr>
<td width="100%">
<table border="0" width="100%" cellspacing="3" cellpadding="0">
<tr height=10>
<TD width="1%"></TD>
<TD width="30%" class="DropShadow" align="left" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15">未导出字段列表</TD>
<td width="16%" >
<TD width="34%" class="DropShadow" align="left" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15">导出字段列表</TD>
<td width="19%">
</tr> <tr>
<td width="1%"></td>
<td width="84%" colspan="4">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" rowspan="4"> <s:select list="#request.noMap" name="colname1" id="colname1"
size="15" multiple="true"
cssStyle="width:200px" ondblclick="JavaScript:Add('colname1','colname2','colname')">
</s:select>
</td>
<td width="15%"></td>
<td width="35%" rowspan="4" id="colnameDiv"> <s:select list="#request.map" name="colname2" id="colname2"
size="15" multiple="true"
cssStyle="width:200px"
ondblclick="JavaScript:Remove('colname1','colname2','colname')">
</s:select>
</td> <td width="20%"></td>
</tr> <tr>
<td width="90" align="center">
<input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 30px; font-size:12px; color:black; height=22">
</td>
<td width="120" align="center">
<input name="doup" type="button" value="向上" onClick="upcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 50px; font-size:12px; color:black; height=22">
</td>
</tr>
<tr>
<td width="90" align="center">
<input name="DoDelb" type="button" value="<<" onClick="JavaScript:Remove()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 30px; font-size:12px; color:black; height=22">
</td>
<td width="120" align="center">
<input name="dodown" type="button" value="向下" onClick="downcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 50px; font-size:12px; color:black; height=22">
</td>
</tr> <tr><td width="73">
<s:hidden name="belongTo" id="belongTo"></s:hidden>
<s:hidden name="expNameList" id="expNameList"></s:hidden>
<s:hidden name="expFieldName" id="expFieldName"></s:hidden>
<s:hidden name="noExpNameList" id="noExpNameList"></s:hidden>
<s:hidden name="noExpFieldName" id="noExpFieldName"></s:hidden>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height=10><td></td></tr>
<tr height=20><td background="${pageContext.request.contextPath }/images/b-info.gif"></td></tr>
<tr height=10><td></td></tr>
<tr><td align="center"><INPUT type="button" name="save" id="save" value="保存" onclick="checksubmit()" style="width: 60px; font-size:12px; color:black; height=22">
<input style="width: 60px; font-size:12px; color:black; height=22" type="reset" value="关闭" id="Reset1" name="Reset1" onclick="window.close();"></td></tr>
</table>
</FORM>
</body>
</html>
移动option标签的更多相关文章
- 让 select 的 option 标签支持事件监听（如复制操作）
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
- select下拉框的探索（<option></option>标签中能嵌套使用其它标签吗）
select标签大家应该经常用到,有个问题可能没怎么注意过, select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等? 经本人测试,答案是:可以嵌套其它标签,但审查元素会 ...
- 关于Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错
Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错 好好的学框架的整合,结果在<option>中加入< ...
- 项目总结09：select标签下封装option标签
项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...
- html select与option标签
1.select 元素 select 元素可创建单选或多选菜单.<select> 元素中的 <option> 标签用于定义列表中的可用选项 常用属性如下: autofocus: ...
- <option> 标签的 value 属性
<html> <body> <form action="/example/html/form_action.asp" method="get ...
- 使用原生JavaScript实现对select增加option标签并附加value属性
好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select ...
- HTML option 标签的 selected 属性
HTML option 标签的 selected 属性 http://www.w3school.com.cn/tags/att_option_selected.asp 1.一般做WEB的时候,Chro ...
- new Option() 创建一个option标签
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
- jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...
随机推荐
- 美食查询手机应用"吃了么"：NABC
一 N(need) 当你在一个陌生的地方游玩,想吃到当地的招牌美食时怎么办? 当你听说有一个很好吃的家常菜,也想自己下厨试试时怎么办?打印出菜谱,还是奔波于厨房和电脑之前? 查询周边美食的功能对于那些 ...
- 【Alpha】第五次Scrum meeting
今日重大事件一览: 姓名 今日完成任务 所耗时间 刘乾 今日没有完成那个Issue..TuT第一次这么努力工作的我没有完成任务...真的是任务太坑啦. 任务完成了 60% Issue链接:https: ...
- 20135337朱荟潼 Linux第七周学习总结——可执行程序的装载
朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 第七周 Linu ...
- 每日scrum(2)
今天是冲刺的第二天,小组主要做了界面的美化,加入了软件的开始动画,以及学校景点的美图介绍: 主要的问题在于除了开始界面,进入软件之后还是有待改进,功能的呈现有待加强. 任务看板: 燃尽图: 会议照片:
- CMake系列之一：概念
不同的make工具遵循不同的规范和标准,因此针对不同的标准需要不同的Makefile文件.CMake利用一种平台无关的CMakeList.txt文件定制编译流程,根据目标用户的平台生成本地化的Make ...
- Windows 7 上面安装 dotnet core 之后 使用 应用报错的处理：api-ms-win-crt-runtime-l1-1-0.dll 丢失
Windows2016 使用 dotnet core的使用 安装了就可以了 但是发现 windows 7 不太行 报错如图示 没办法简单百度了下 https://www.microsoft.com/z ...
- 如何使用js判断视频是否可以成功访问
日常工作中会出现各个公司网络不互通的情况,视频如果采用不互通的地址也无法播放,下面方法提供了检测视频是否可以播放的解决方案: 1.跨域 var video = document.createEleme ...
- Angular中ui-grid的使用详解
Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...
- java 重载 : 1.参数个数不同，2.参数类型不同
参数个数相同时,参数类型需要不同,即使是不同变量名也不行.和是和变量的个数或者是变量的类型有关系 如果相同的话是覆盖 会报错 重载(overloading) 是在一个类里面,方法名字相同,而参数不同 ...
- Eclipse Job
Job可以我们基于Eclipse的Java程序中,我们有很多种方式提供多任务的实现.熟悉Java的朋友立即会想到Java的Thread类,这是Java中使 用最多的一个实现多任务的类.Eclipse平 ...