zoukankan      html  css  js  c++  java
  • 移动option标签

      1 <%@ page language="java" pageEncoding="UTF-8"%>
      2 <%@taglib uri="/struts-tags" prefix="s"%>
      3 <html>
      4 <head>
      5 <title>导出设置</title>   
      6 <link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
      7 <script type="text/javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
      8 <script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.4.2.js"></script>
      9 <script type="text/javascript" >
     10   
     11   /**
     12   function Add() {
     13               
     14           allRoles = document.getElementById("colname1");
     15           selectRoles = document.getElementById("colname2");
     16           
     17           for(var i =0;i<allRoles.options.length;i++){
     18             if(allRoles.options[i].selected==true){
     19                 selectRoles.options.add( new Option(allRoles.options[i].text,allRoles.options[i].value));
     20                 allRoles.remove(i);
     21                 i--;
     22             }
     23          }
     24                          
     25     }
     26   
     27     function Remove() {
     28             
     29          allRoles = document.getElementById("colname1");
     30            selectRoles = document.getElementById("colname2");
     31               
     32            for(var i =0;i<selectRoles.options.length;i++){
     33               if(selectRoles.options[i].selected==true){
     34                   allRoles.options.add( new Option(selectRoles.options[i].text,selectRoles.options[i].value));
     35                   selectRoles.remove(i);
     36                   i--;
     37               }
     38            }
     39     }
     40     function upcol() {
     41           
     42             var rightcol = document.getElementById("colname2");           
     43             var selectflag=0;
     44         
     45             for(var i =0;i<rightcol.options.length;i++){
     46                             
     47                 if(rightcol.options[i].selected==true && i!=0){
     48                     
     49                     var temptext=rightcol.options[i].text;
     50                     var tempvalue=rightcol.options[i].value;
     51                     
     52                     rightcol.options[i].value=rightcol.options[i-1].value;
     53                     rightcol.options[i].text=rightcol.options[i-1].text;
     54                     rightcol.options[i-1].value=tempvalue;
     55                     rightcol.options[i-1].text=temptext;
     56                     
     57                     selectflag=i-1;
     58                     break; //这个标志表明目前只能一次移一行,不支持多选
     59                 }
     60             }
     61             
     62             for(var i =0;i<rightcol.options.length;i++){
     63                rightcol.options[i].selected=false;
     64             }
     65             rightcol.options[selectflag].selected=true;    
     66     }
     67     function downcol() {
     68           
     69             var rightcol = document.getElementById("colname2");             
     70             var selectflag=0;
     71         
     72             for(var i=0;i<rightcol.options.length;i++){
     73 
     74                 if(rightcol.options[i].selected==true && i!=rightcol.options.length-1){
     75                         
     76                     var temptext=rightcol.options[i].text;
     77                     var tempvalue=rightcol.options[i].value;
     78                     
     79                     rightcol.options[i].value=rightcol.options[i+1].value;
     80                     rightcol.options[i].text=rightcol.options[i+1].text;
     81                     rightcol.options[i+1].value=tempvalue;
     82                     rightcol.options[i+1].text=temptext;
     83                     
     84                     selectflag=i+1;
     85                     break; //这个标志表明目前只能一次移一行,不支持多选
     86                 }
     87             }
     88             
     89             if(selectflag!=0){ //如果此标志为0,说明光标已经移到最下边,没有发生向下交换的行动
     90                 for(var i =0;i<rightcol.options.length;i++){
     91                   rightcol.options[i].selected=false;
     92                 }
     93                 rightcol.options[selectflag].selected=true;
     94             }
     95     }
     96   */
     97   
     98   function Add() {
     99          $("#colname1 option:selected").appendTo($("#colname2"));        
    100   }
    101     
    102   function Remove() {
    103        $("#colname2 option:selected").appendTo($("#colname1"));    
    104   }
    105      
    106      
    107   function upcol() {
    108        //获取选中的右侧option元素
    109        var rightcol = $("#colname2 option:selected"); 
    110        //option的第一个元素无法上移,rightcol.get(0)表示选中的option对象,rightcol.get(0).index表示option对象的位置索引,从0开始
    111        if(rightcol.get(0).index!=0){  
    112             rightcol.each(function(){  
    113                    $(this).prev().before($(this));  //在当前选中对象的前面插入该对象
    114                    //$(this).insertBefore($(this).prev());//等同于
    115                });  
    116        }      
    117   }
    118   function downcol() {
    119        //选择所有的对象
    120        var allrightcol = $("#colname2 option");  
    121        //选择被选中的对象
    122        var rightcol = $("#colname2 option:selected");  
    123        //option的最后一个元素无法下移
    124        if(rightcol.get(rightcol.length-1).index!=allrightcol.length-1){  
    125             //循环选中的对象
    126             for(i=rightcol.length-1;i>=0;i--){  
    127                 //获取选中的对象
    128                 var item = $(rightcol.get(i));  
    129                   item.insertAfter(item.next());  //将选中的对象插入到下一个对象的后面
    130                   //item.next().after(item);//等同于
    131             }  
    132       } 
    133   }  
    134        
    135    function setValue(){
    136 
    137                          
    138    
    139             var rightcol = document.getElementById("colname2");
    140             var leftcol = document.getElementById("colname1");
    141             
    142                selectid="";        
    143               selectname="";
    144               noselectid="";
    145               noselectname="";
    146                               
    147               for(var m =0;m<rightcol.options.length;m++){
    148                    if(m==rightcol.options.length-1){
    149                      selectid+=rightcol.options[m].value;
    150                      selectname+=rightcol.options[m].text;
    151                      }else{
    152                      selectid+=rightcol.options[m].value +"#"; 
    153                       selectname+=rightcol.options[m].text +"#";   
    154                    }            
    155               }
    156                  
    157               for(var m =0;m<leftcol.options.length;m++){
    158                   if(m==leftcol.options.length-1){
    159                     noselectid+=leftcol.options[m].value;
    160                     noselectname+=leftcol.options[m].text;
    161                    }else{
    162                      noselectid+=leftcol.options[m].value +"#"; 
    163                      noselectname+=leftcol.options[m].text +"#";   
    164                    }            
    165               }
    166                   
    167               document.Form1.expNameList.value=selectname;
    168               document.Form1.expFieldName.value=selectid;
    169               document.Form1.noExpNameList.value=noselectname;
    170               document.Form1.noExpFieldName.value=noselectid;
    171                            
    172      }    
    173      
    174      function checksubmit(){
    175        setValue();    
    176        if(document.Form1.expNameList.value=="" || document.Form1.expFieldName.value==""){
    177        
    178           alert("请至少选择一列作为导出列");
    179           return;
    180        }
    181      
    182        document.Form1.action="system/elecExportFieldsAction_saveSetExportExcel.do";
    183        document.Form1.submit();      
    184      }
    185      
    186      </script>
    187   </head>
    188   
    189   <body onload="setValue()">
    190    <FORM id="Form1" name="Form1"  method="POST" >
    191    
    192   <br>
    193    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    194     <tr>
    195         <td class="ta_01" align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
    196             <font face="宋体" size="2"><strong>导出字段设置</strong></font>
    197         </td>
    198     </tr>
    199     <tr height=10><td></td></tr>
    200     
    201     <tr>
    202     <td width="100%">
    203       <table border="0" width="100%" cellspacing="3" cellpadding="0">
    204         <tr height=10>
    205             <TD width="1%"></TD>
    206             <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>
    207             <td width="16%" >
    208             <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>
    209             <td width="19%">
    210         </tr>
    211         
    212         <tr>
    213           <td width="1%"></td>
    214           <td width="84%" colspan="4">      
    215            <table border="0" width="100%" cellspacing="0" cellpadding="0">
    216                <tr>
    217                    <td width="30%" rowspan="4">
    218                    
    219                    <s:select list="#request.noMap" name="colname1" id="colname1"
    220                                 size="15" multiple="true"
    221                                 cssStyle="200px" ondblclick="JavaScript:Add('colname1','colname2','colname')">
    222                    </s:select>
    223                    </td> 
    224                    <td width="15%"></td>
    225                    <td width="35%" rowspan="4" id="colnameDiv">
    226                    
    227                    <s:select list="#request.map" name="colname2" id="colname2"
    228                                 size="15" multiple="true"
    229                                 cssStyle="200px"
    230                                 ondblclick="JavaScript:Remove('colname1','colname2','colname')">
    231                    </s:select>
    232                    </td>  
    233                    
    234                    <td width="20%"></td>
    235                 </tr>  
    236              
    237                   <tr>                  
    238                        <td width="90" align="center">
    239                        <input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style=" 30px; font-size:12px; color:black; height=22">
    240                        </td>
    241                        <td width="120" align="center">
    242                        <input name="doup" type="button" value="向上" onClick="upcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style=" 50px; font-size:12px; color:black; height=22">
    243                        </td>
    244                   </tr>
    245                   <tr>
    246                       <td width="90" align="center">
    247                       <input name="DoDelb" type="button" value="<<"  onClick="JavaScript:Remove()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style=" 30px; font-size:12px; color:black; height=22">
    248                       </td>
    249                       <td width="120" align="center">
    250                       <input name="dodown" type="button" value="向下"  onClick="downcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style=" 50px; font-size:12px; color:black; height=22">
    251                       </td>
    252                   </tr>
    253   
    254                   <tr><td width="73">
    255                          <s:hidden name="belongTo"  id="belongTo"></s:hidden>
    256                          <s:hidden name="expNameList"  id="expNameList"></s:hidden>
    257                          <s:hidden name="expFieldName"  id="expFieldName"></s:hidden>
    258                          <s:hidden name="noExpNameList"  id="noExpNameList"></s:hidden>
    259                          <s:hidden name="noExpFieldName"  id="noExpFieldName"></s:hidden>
    260                   </td></tr>     
    261            </table>  
    262           </td>
    263         </tr>
    264       </table> 
    265       </td>
    266       </tr>
    267       <tr height=10><td></td></tr>
    268       <tr height=20><td background="${pageContext.request.contextPath }/images/b-info.gif"></td></tr>
    269       <tr height=10><td></td></tr>
    270       <tr><td align="center"><INPUT type="button"  name="save" id="save"  value="保存" onclick="checksubmit()" style=" 60px; font-size:12px; color:black; height=22">
    271       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    272               <input style=" 60px; font-size:12px; color:black; height=22" type="reset" value="关闭" id="Reset1" name="Reset1" onclick="window.close();"></td></tr>
    273    </table>    
    274  </FORM>
    275   </body>
    276 </html>

  • 相关阅读:
    VS20005特殊文件夹
    【Vegas原创】SQL case when 用法
    Session 详解
    How To Connect to Excel
    Visual Studio 2005下的Web Application Projects和Web Site Projects两种模型比较
    检索 COM 类工厂中 CLSID 为 {000209FF00000000C000000000000046} 的组件时失败解决方法
    【Vegas原创】GridView前台绑定HyperLink参数&自动编号
    【Vegas原创】GridView设定DataFormatString属性失效的解决方法
    【Vegas原创】TreeView操作数据库的使用方法(VB)
    【Vegas原创】VB.NET版的GridView经典使用(编辑,删除,分页,链接列)
  • 原文地址:https://www.cnblogs.com/xuyou551/p/8383812.html
Copyright © 2011-2022 走看看