`

功能类似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页面放入您的项目中,即可看到效果!

    struts2 optiontransferselect标签使用中的问题

    在Struts2中,OptionTransferSelect标签是一个强大的组件,它允许用户在两个下拉列表之间转移选项,常用于实现多选功能。这篇博客文章可能讨论了在使用OptionTransferSelect标签时遇到的问题以及解决方法。 在...

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

    `s:optiontransferselect`是Struts2的自定义JSP标签,用于构建一个具有双列选择功能的组件。该标签允许用户从左侧列表选择项目,并将其移动到右侧列表,反之亦然。这个标签的主要属性包括: - `list`: 指定下拉列表...

    Struts2 UI标签代码示例

    本篇文章将深入探讨Struts2 UI标签中的几个关键组件:tabbedPanel、autocompleter、tree和treenode以及optiontransferselect,这些标签在实际项目中有着广泛的应用。 首先,`tabbedPanel`标签是用于创建多选项卡的...

    Struts2标签列表及说明

    Struts2 标签列表及说明 Struts2 是一个基于 Java 语言的 Web 应用程序 Framework,它提供了许多标签来帮助开发者快速构建 Web 应用程序。下面是 Struts2 的标签列表及说明: A: * &lt;s:a&gt;:超链接,类似于 HTML ...

    struts2-s标签

    ### Struts2 S 标签库详解 #### 引言 Struts2 是一款流行的 Java Web 开发框架,它提供了一系列强大的功能来帮助开发者构建健壮的 Web 应用程序。其中,Struts2 的标签库是其核心特性之一,为开发者提供了丰富的 ...

    Struts_2_标签库(文档手册)_Tags-API-CLSW-JSP

    标题和描述中提到的知识点是关于Struts 2框架中的标签库使用,特别是与JSP相关的部分。Struts 2框架是一种基于MVC(Model-View-Controller)设计模式的Java Web应用程序框架,用于构建动态、可扩展的Web应用。其标签...

    struts2标签大全

    - `&lt;s:a href=""&gt;&lt;/s:a&gt;`:创建一个超链接,与HTML的`&lt;a&gt;`标签类似,但可以与Struts2框架交互,链接到指定的Action。 - `&lt;s:action name=""&gt;&lt;/s:action&gt;`:执行视图中的一个Action,可以根据Action的名字来决定跳转...

    Jsp struts2标签大全

    本文将详细介绍部分Struts2标签的功能及其使用方法。 #### 二、标签概述 ##### 1. **a 标签** - **功能描述**:创建一个HTML超链接,类似于HTML中的 `&lt;a href=""&gt;` 标签。 - **示例代码**: ```jsp 登录 ``` ...

    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常用标签

    Struts2是一个强大的MVC框架,它提供了丰富的标签库,使得开发者可以更加便捷地构建动态网页。以下是对Struts2中一些常用标签的详细说明: 1. `&lt;s:a&gt;`:这是一个超链接标签,用于创建HTML的`&lt;a&gt;`标签。通过指定`...

    Struts2标签详解及具体实例解析

    ### Struts2标签详解及具体实例解析 #### 一、概述 Struts2是一个基于MVC模式的开源框架,它提供了丰富的标签库来简化Web应用的开发过程。这些标签不仅功能强大,而且易于使用,可以帮助开发者快速构建动态网页。...

    struts2标签介绍

    1. `&lt;s:a&gt;` - 用于创建超链接,与HTML的`&lt;a&gt;`标签类似,可以绑定到Action,如:`&lt;s:a href="actionName"&gt;Link Text&lt;/s:a&gt;`。 2. `&lt;s:action&gt;` - 执行视图中的Action,通常用于导航,如:`...

    struts2.0 taglib 标签库

    Struts2.0 Taglib标签库是Struts2框架中的核心组成部分,它提供了一组丰富的JSP标签,简化了视图层的开发,使得开发者可以更加专注于业务逻辑,而不用过多地处理HTML和Java代码的混杂。这些标签主要分为以下几大类:...

    Struts标签集合简介

    此标签类似于Struts1中的JavaBean引用,但在Struts2中并不常用,因为Struts2更倾向于使用Action来处理业务逻辑。 C. `&lt;s:checkbox&gt;`, `&lt;s:checkboxlist&gt;`, `&lt;s:combobox&gt;`, `&lt;s:component&gt;`: 这些标签用于创建复选...

    struts2标签学习

    与Struts1的标签库相比,Struts2的标签更加灵活且功能更加强大。 首先,Struts2的标签分为两大类:非UI标签和UI标签。非UI标签主要用于处理控制流程和数据绑定,而UI标签则用于创建用户界面。在Struts1中,标签库被...

    struts2标签大全详解

    Struts2是一个强大的MVC框架,它提供了丰富的标签库,使得开发者可以更加便捷地构建动态网页。以下是对Struts2标签的详细解释: A部分: 1. `&lt;s:a&gt;`:创建一个链接,与HTML的`&lt;a&gt;`标签相似,允许传递参数。 2. `...

    Struts2常用标签

    ### Struts2常用标签详解 #### 一、概述 Struts2框架作为一款成熟的Web应用开发框架,在Java Web开发领域有着广泛的应用。Struts2框架提供了丰富的标签库,这些标签可以极大地方便开发者进行Web页面的开发工作。...

    struts2标签整理

    ### Struts2 标签详解 #### 一、概述 Struts2框架是Apache软件基金会提供的一个开源Web应用框架,它继承了Struts1的优点,并在此基础上做了许多改进。Struts2提供了丰富的标签库(Tag Library),使得开发人员能够...

Global site tag (gtag.js) - Google Analytics