移动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>

原文地址:https://www.cnblogs.com/xuyou551/p/8383812.html