功能类似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">-></a><br> <a href="#" id="remove"><-</a><br> <a href="#" id="alladd">-->></a><br> <a href="#" id="allremove"><<--</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> <a href="#" id="left_down"> v</a> </td> <td></td> <td align="center"> <a href="#" id="right_up">^</a> <a href="#" id="right_down">v</a> </td> </tr> </table>
?来源http://www.oschina.net/code/snippet_179497_8582