移动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"> * ...
随机推荐
- CoreDNS Plugins ---> hosts
需求 kubernetes集群外部有少量服务,kubernetes集群内部pod需要通过服务所在的主机的hostname访问服务. 解决方案 通过coredns的hosts插件配置kubernetes ...
- Jquery封装ajax
Jquery封装ajax Load方法 <!-- 将jquery.js导入进来 --> <script type="text/javascript&qu ...
- ElasticSearch 2 (34) - 信息聚合系列之多值排序
ElasticSearch 2 (34) - 信息聚合系列之多值排序 摘要 多值桶(terms.histogram 和 date_histogram)动态生成很多桶,Elasticsearch 是如何 ...
- C#简述（三）
详细请参考:http://www.runoob.com/csharp/csharp-string.html 1.C# 字符串(String) 在 C# 中,可以使用字符数组来表示字符串,但是,更常见的 ...
- bash基本功能 -命令的别名和快捷键
命令的别名 == 人的小名 如何查看和设定别名 alias 查看系统中的所有别名 ls --color=auto alias ll = 'ls - l --color=auto' touch abc ...
- Linux命令（十三） 建立目录 mkdir 删除目录 rmdir
一.建立目录 mkdir 命令简介 mkdir 命令用于创建指定的目录.创建目录时当前用户对需要操作的目录有读取权限.如果目录已经存在,会提示报错并推出. mkdir 可以创建多级目录. 常用参数说明 ...
- Postgresql迁移数据文件存放位置
1. POSTGRESQL的安装 centos7 里面默认的pgsql的版本是 如果想用更高的版本需要执行以下如下的命令 rpm -ivh https://download.postgresql.or ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：0. 项目简介 & 成果展示
本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数 ...
- PowerExchange实时抽取架构介绍
工作原理 准实时抽取架构图: 以上共有核心业务系统数据库服务器.ETL服务器.BI数据库服务器[目标数据库服务器],三台服务器和ETL客户端(PowerCenter客户端).其中核心业务系统上有核心系 ...
- BZOJ2744 HEOI2012朋友圈（二分图匹配）
先考虑B国.容易发现a xor b mod 2=0即二进制末位相同,那么可以据此将所有人分成两部分,每一部分各自是一个完全图.然后再将a or b有奇数个1的边连上,现在需要求的就是这样一个图里的最大 ...