功能类似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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值