`

功能类似struts2 optiontransferselect 标签的jquery组件

 
阅读更多
<script type="text/javascript">
	$(function(){                                                                                        
                                                                                                     
   //全部移到右边                                                                                    
                                                                                                     
    $('#alladd').click(function() {                                                               
                                                                                                     
    $('#leftselect option').remove().appendTo('#rightselect');                                       
                                                                                                     
    });                                                                                              
                                                                                                     
    //全部移动左边                                                                                   
                                                                                                     
   $('#allremove').click(function() {                                                                
                                                                                                     
    $('#rightselect option').remove().appendTo('#leftselect');                                       
                                                                                                     
    });                                                                                              
                                                                                                     
       //移到右边                                                                                    
                                                                                                     
    $('#add').click(function() {                                                                     
                                                                                                     
    $('#leftselect option:selected').remove().appendTo('#rightselect');                              
                                                                                                     
    });                                                                                              
                                                                                                     
    //移到左边                                                                                       
                                                                                                     
    $('#remove').click(function() {                                                                  
                                                                                                     
    $('#rightselect option:selected').remove().appendTo('#leftselect');                              
                                                                                                     
    });                                                                                              
                                                                                                     
       //双击选项                                                                                    
                                                                                                     
    $('#leftselect').dblclick(function(){                                                            
                                                                                                     
        $("option:selected",this).remove().appendTo('#rightselect');                                 
                                                                                                     
    });                                                                                              
                                                                                                     
    //双击选项                                                                                       
                                                                                                     
       $('#rightselect').dblclick(function(){                                                        
                                                                                                     
        $("option:selected",this).remove().appendTo('#leftselect');                                  
                                                                                                     
    });                                                                                              
                                                                                                     
    //左边向上按钮                                                                                   
                                                                                                     
    $('#left_up').click(function(){                                                                  
                                                                                                     
       var index = $('#leftselect option').index($('#leftselect option:selected:first'));            
                                                                                                     
    var $recent = $('#leftselect option:eq('+(index-1)+')');                                         
                                                                                                     
    if(index>0){                                                                                     
                                                                                                     
       var $options = $('#leftselect option:selected').remove();                                     
                                                                                                     
    setTimeout(function(){                                                                           
                                                                                                     
      $recent.before($options )                                                                      
                                                                                                     
    },10);                                                                                           
                                                                                                     
    }                                                                                                
                                                                                                     
    });                                                                                              
                                                                                                     
    //左边向下按钮                                                                                   
                                                                                                     
    $('#left_down').click(function(){                                                                
                                                                                                     
       var index = $('#leftselect option').index($('#leftselect option:selected:last'));             
                                                                                                     
    var len = $('#leftselect option').length-1;                                                      
                                                                                                     
    var $recent = $('#leftselect option:eq('+(index+1)+')');                                         
                                                                                                     
    if(index<len ){                                                                                  
                                                                                                     
   var $options = $('#leftselect option:selected').remove();                                         
                                                                                                     
    setTimeout(function(){                                                                           
                                                                                                     
     $recent.after( $options )                                                                       
                                                                                                     
    },10);                                                                                           
                                                                                                     
     }                                                                                               
                                                                                                     
    });                                                                                              
                                                                                                     
    //右边向上按钮                                                                                   
                                                                                                     
    $('#right_up').click(function(){                                                                 
                                                                                                     
       var index = $('#rightselect option').index($('#rightselect option:selected:first'));          
                                                                                                     
    var $recent = $('#rightselect option:eq('+(index-1)+')');                                        
                                                                                                     
    if(index>0){                                                                                     
                                                                                                     
       var $options = $('#rightselect option:selected').remove();                                    
                                                                                                     
    setTimeout(function(){                                                                           
                                                                                                     
      $recent.before($options )                                                                      
                                                                                                     
    },10);                                                                                           
                                                                                                     
    }                                                                                                
                                                                                                     
    });                                                                                              
                                                                                                     
    //右边向下按钮                                                                                   
                                                                                                     
    $('#right_down').click(function(){                                                               
                                                                                                     
       var index = $('#rightselect option').index($('#rightselect option:selected:last'));           
                                                                                                     
    var len = $('#rightselect option').length-1;                                                     
                                                                                                     
    var $recent = $('#rightselect option:eq('+(index+1)+')');                                        
                                                                                                     
    if(index<len ){                                                                                  
                                                                                                     
   var $options = $('#rightselect option:selected').remove();                                        
                                                                                                     
    setTimeout(function(){                                                                           
                                                                                                     
     $recent.after( $options )                                                                       
                                                                                                     
    },10);                                                                                           
                                                                                                     
     }                                                                                               
                                                                                                     
    });                                                                                              
                                                                                                     
});                                                                                                  

</script>

 列表页面

<table align="center" cellpadding="0" cellspacing="0">  

     <tr><td>可选择表项</td><td></td><td>已选择表项</td></tr>  

     <tr>  

      <td>  

      <select multiple="multiple" id="leftselect" name="leftselect" style="width: 100px;height:160px;">  

     <option value="1">选项1</option>  

      <option value="2">选项2</option>  

      <option value="3">选项3</option>  

     <option value="4">选项4</option>  

      <option value="5">选项5</option>  

      <option value="6">选项6</option>  

      <option value="7">选项7</option>  

       <option value="8">选项8</option>  

      </select>  

    

   </td>  

   <td>  

  <a href="#" id="add">-&gt;</a><br>  

   <a href="#" id="remove">&lt;-</a><br>  

    <a href="#" id="alladd">--&gt;&gt;</a><br>  

    <a href="#" id="allremove">&lt;&lt;--</a>  

    </td>  

     <td>  

    <select multiple="multiple" id="rightselect" name="rightselect" style="width: 100px;height:160px;">  

   </select>  

   </td>  

   </tr>  
  <tr>  

     <td align="center">  

    <a href="#" id="left_up">^</a>&nbsp;&nbsp;&nbsp;<a href="#" id="left_down"> v</a>  

    </td>  

 <td></td>  

  <td align="center">  

   <a href="#" id="right_up">^</a>&nbsp;&nbsp;&nbsp;<a href="#" id="right_down">v</a>  

  </td>  

  </tr>  


  </table> 

 来源http://www.oschina.net/code/snippet_179497_8582

分享到:
评论

相关推荐

    struts2 optiontransferselect标签的用法

    struts2 optiontransferselect标签,其中包含一个jsp页面,可以将此jsp页面放入您的项目中,即可看到效果!

    JQuery实现select互换数据和上下移动

    功能类似struts2 optiontransferselect 标签的jquery组件 非常好用的一个JQuery组件

    struts2 optiontransferselect标签使用中的问题

    NULL 博文链接:https://hanxin0311.iteye.com/blog/443327

    Struts2 UI标签代码示例

    Struts2 UI标签示例(包含tabbedPanel标签,autocompleter标签,tree和treenode,optiontransferselect标签等)

    struts2标签大全详解

    struts2标签大全详解,optiontransferselect标签属性 ,Struts2常用的Ajax标签

    struts2 标签 s:optiontransferselect左右下拉列表的使用。

    NULL 博文链接:https://zhouhaitao.iteye.com/blog/1179393

    struts2 标签库 帮助文档

    Struts 2 标签库(文档手册) Tags-API-CLSW-JSP &lt;%@ taglib prefix="s" uri="/struts-tags" %&gt; 就能使用struts2.0的标签库 下面就介绍每个标签的具体应用实例说明:按字母排列 A: 1. 2. &lt;s:a href=""&gt;&lt;/s:a&gt;-...

    Struts2+API+标签全解+网页说明

    optiontransferselect标签:创建两个选项以及转移下拉列表项,该标签生成两个下拉列表框,同时生成相应的按钮,这些按钮可以控制选项在两个下拉列表之间移动、排序。 radio标签:单选框。 optgroup标签:生成一个...

    JSP_struts2标签大全

    JSP_struts2标签大全 1.a 3 2.action 3 3. actionerror 4 4. actionmessage 5 5. append 5 6. bean 7 7.checkbox 7 8.checkboxlist 8 9. combobox 9 10. conponent 9 11. date 11 12. datetimepicker 12 13. debug ...

    深入浅出Struts2(附源码)

    本书是广受赞誉的Struts 2优秀教程,它全面而深入地阐述了Struts 2的各个特性,并指导开发人员如何根据遇到的问题对症下药,选择使用最合适的特性。作者处处从实战出发,在丰富的示例中直观地探讨了许多实用的技术,...

    用struts2 实现注册

    用struts2实现用户的注册,涉及到的知识点包括用户名和密码的校验(正则表达式验证);国际化;radio,checkboxlist,optiontransferselect等标签的使用,文件的上传等。

    struts2相关资料

    这里包含了struts2标签的介绍,介绍了Struts2中OGNLvalueStack和stackContext,radio List的预选问题,文件的上传与下载,防止表单重复提交optiontransferselect字符串拼接,struts2_Path_路径问题

    Struts2标签 UI标志又可以分为表单UI和非表单UI两部分

    不过,Struts 2.0加了几个我们经常在项目中用到的控件如:datepicker、doubleselect、timepicker、optiontransferselect等。因为这些标志很多都经常用到,而且参数也很多,要在一篇文章详细说明并非易事。 下面主要...

    低清版 大型门户网站是这样炼成的.pdf

    11.4.1 展示层jsp 2+struts 2标签库实现 711 11.4.2 控制层struts 2实现 720 11.4.3 持久层hibernate 3实现 728 11.4.4 spring 2接管业务逻辑层 730 11.5 小结 733 第12章 站务必备—系统用户管理与流量统计 ...

    深入浅出Struts 2 .pdf(原书扫描版) part 1

    5.18 optiontransferselect标签 87 5.19 doubleselect标签 90 5.20 主题 92 5.21 小结 94 第6章 通用标签 95 6.1 property标签 95 6.2 a标签 97 6.3 action标签 97 6.4 param标签 98 6.5 bean标签 98 6.6 date标签 ...

Global site tag (gtag.js) - Google Analytics