JQuery实现Select数据的相互转换
完整源码下载地址：http://download.csdn.net/detail/software0116/4610452
js代码：
$(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);}});});
HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Select.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css.css" type="text/css"></link><script type="text/javascript" src="jquery-1.4.4.min.js"></script><script type="text/javascript" src="selectOption.js"></script></head><body><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="选中向右"><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></body></html>