移动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"> * ...
随机推荐
- 记录Appium-desktop踩过的坑could not find devices
最近了解到一个自动化入门的新工具appium-desktop,看网上各种文章,感觉这个工具是很简单的一个入门级工具,下载试用了一下. 官网下载,输入网址appium.io,点击下载. 一路傻瓜式安装, ...
- PAT甲题题解-1044. Shopping in Mars (25)-水题
n,m然后给出n个数让你求所有存在的区间[l,r],使得a[l]~a[r]的和为m并且按l的大小顺序输出对应区间.如果不存在和为m的区间段,则输出a[l]~a[r]-m最小的区间段方案. 如果两层fo ...
- 甲题题解-1116. Come on! Let’s C (20)-（素数筛选法）
用vis标记出现过的id,checked标记询问过的id.至于如何判断排名为素数,用素数筛选法预处理一下即可,水题. #include <iostream> #include <cs ...
- YQCB冲刺第二周第三天
今天的任务依旧查看消费明细的功能. 遇到的问题为显示消费记录时显示所有用户的消费记录. 站立会议 任务面板
- 新手上路 git你好
天哪,虽然我是一个学计算机的,但是我发现我的计算机学的真是……好吧不说了,言归正传. 这几天一直在着手于git,可能只是学了一个皮毛,结果也是不大尽人意,跟着别人学了学,鼓捣了鼓捣,还是有点小小的收 ...
- Beta阶段冲刺-5
一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 杨晨露:现在我过的某种意义上挺滋润的,没啥事了都.......咳,困难就是前端每天都在想砸电脑,我要怎么阻止 ...
- Ns3 构建哑铃型拓扑，并实现两个点的TCP连接（详细请戳全文）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaUAAADlCAIAAAB8n38hAAAV8UlEQVR4nO3dMWjjyBoH8CkNj1uc5v
- 组件 --BreadCrumb--面包屑
面包屑组件多用于导航栏,对于大型网站,做面包屑导航栏 .breadcrumb .breadcrumb-item .active:表示现在正处在该页面 效果截图: 代码: <nav> < ...
- php常用几种设计模式的应用场景
1.单例设计模式 所谓单例模式,即在应用程序中最多只有该类的一个实例存在,一旦创建,就会一直存在于内存中! 单例设计模式常应用于数据库类设计,采用单例模式,只连接一次数据库,防止打开多个数据库连接. ...
- Python [练习题] ：字典扁平化
习题:将source字典扁平化,输出为 target 格式的字典.source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}targe ...