移动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"> * ...
随机推荐
- ElasticSearch读写原理
es 写入数据的工作原理是什么啊?es 查询数据的工作原理是什么啊?底层的 lucene 介绍一下呗?倒排索引了解吗? es 写数据过程 客户端选择一个 node 发送请求过去,这个 node 就是 ...
- PAT甲题题解-1041. Be Unique (20)-水题
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789189.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- JAVA每日一旅2
1.关于类型转换 两个数值进行二元操作时,会有如下的转换操作: 如果两个操作数其中有一个是double类型,另一个操作就会转换为double类型. 否则,如果其中一个操作数是float类型,另一个将会 ...
- java实验报告三
实验三 敏捷开发与XP实践 一.实验内容 1. XP基础 2. XP核心实践 3. 相关工具 二.实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上 ...
- 20135323符运锦----第三周：构建一个简单的Linux系统MenuOS
相关知识点 1.arch目录 占据相当庞大的空间,X86目录下代码需要重点关注. 2.init目录 内核启动的相关代码基本都在此目录下,内含MAIN.C,文件中START_KERNEL是整个LINUX ...
- IOS的开发演变历史
对IOS开发平台一直抱有很大兴趣,正好通过这个机会好好了解一下IOS的开发历程! 通过一些查阅,我了解到IOS的开发平台主要是依靠Xcode软件来编写程序,同时又需要在MAC OS X的环境下运行,w ...
- [转]JAVA 在main中访问内部类、方法等
1.使用静态的属性.方法.内部类 class A { static int i = 1; // A 类的静态属性 static void outPut() // A 类的静态方法 { System.o ...
- django学习--1
1 安装 安装anacanda后 conda install django 2 新建项目 django-admin.py startproject HelloWorld 创建完成后我们可以查看下项目的 ...
- 插入排序的C、C++实现
一.插入排序 有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序,这个时候就要用到一种新的排序方法--插入排序法,插入排序的基本操作就是将一个数据插入到 ...
- 微信 小程序组件 加入购物车全套 one wxml
<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="co ...