HTML部分
<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>
<input type="button" class="button" id="add" value="选中向右" width="6">
<br>
<input type="button" class="button" id="remove" value="选中向左">
<br>
<input type="button" class="button" id="alladd" value="全部向右">
<br>
<input type="button" class="button" id="allremove" value="全部向左">
</td>
<td>
<select multiple="multiple" id="rightselect" name="rightselect"
style="width: 100px; height: 160px;">
</select>
</td>
</tr>
<tr>
<td align="center">
<input id="left_up" class="button" type="button" value="向上" />
<input id="left_down" class="button" type="button" value="向下" />
</td>
<td></td>
<td align="center">
<input id="right_up" class="button" type="button" value="向上" />
<input id="right_down" class="button" type="button" value="向下" />
</td>
</tr>
</table>
js部分
//全部向右
$('#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);
}
});