移动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"> * ...
随机推荐
- CentOS7安装OpenStack(Rocky版)-01.控制节点的系统环境准备
分享一下Rocky版本的OpenStack安装管理经验: OpenStack每半年左右更新一版,目前是版本是201808月发布的版本-R版(Rocky),目前版本安装方法优化较好,不过依然是比较复杂 ...
- 利用顺序栈解决括号匹配问题（c++）-- 数据结构
题目: 7-1 括号匹配 (30 分) 给定一串字符,不超过100个字符,可能包括括号.数字.字母.标点符号.空格,编程检查这一串字符中的( ) ,[ ],{ }是否匹配. 输入格式: 输入在一行 ...
- TCP三路握手，本质是一个通信原理相关的问题
在通信系统中,最基本的信息的传递都需要两步,发送方发送的消息和对方的回复确认:A->B Send, B->A Reply(ACK).如果多接触一下其他行业的通信流程和规范,例如航空.铁路调 ...
- 一张图理解Git
更详细的git介绍:Git操作指南
- MySQL 字符串截取函数
MySQL 字符串截取函数:left(), right(), substring(), substring_index().还有 mid(), substr().其中,mid(), substr() ...
- [阮一峰]Linux 守护进程的启动方法
"守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后,下一件事就是启动,让它 ...
- 深入理解C++中的异常处理机制
异常处理 增强错误恢复能力是提高代码健壮性的最有力的途径之一,C语言中采用的错误处理方法被认为是紧耦合的,函数的使用者必须在非常靠近函数调用的地方编 写错误处理代码,这样会使得其变得笨拙和难以使用.C ...
- 【题解】 Codeforces 919F A Game With Numbers（拓扑排序+博弈论+哈希）
懒得复制,戳我戳我 Solution: 我感觉我也说不太好,看Awson的题解吧. 说一点之前打错的地方: 连边存的是hash后的数组下标 if(ans[ num( C[a.hash()] , C[b ...
- 深入解析ES6 更易于继承的类语法的使用
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- 【bzoj1069】最大土地面积
Description 在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. Input 第1行一个正整数N,接下来N行,每行2个数x,y ...