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