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>

  • 相关阅读:
    461. Hamming Distance
    342. Power of Four
    326. Power of Three
    368. Largest Divisible Subset java solutions
    95. Unique Binary Search Trees II java solutions
    303. Range Sum Query
    160. Intersection of Two Linked Lists java solutions
    88. Merge Sorted Array java solutions
    67. Add Binary java solutions
    14. Longest Common Prefix java solutions
  • 原文地址:https://www.cnblogs.com/xuyou551/p/8383812.html
Copyright © 2011-2022 走看看