老裴帮助关于Jquery实现多选文本框左移，右移，上移，下移的练习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>MultiSelectBox操作</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript"
src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
//-------------------------------移动(move)测试:------------------------------
//可供选择双击
jQuery("#select1").dblclick(
function(){
jQuery(this).listTolist("select1","select2","move",false);
});
//已选择项双击
jQuery("#select2").dblclick(
function(){
jQuery(this).listTolist("select2","select1","move",false);
});
//右移
jQuery("#moveright").click(function(){
jQuery(this).listTolist("select1","select2","move",false);
});
//全部右移
jQuery("#moverightall").click(function(){
jQuery(this).listTolist("select1","select2","move",true);
});
//左移
jQuery("#moveleft").click(function(){
jQuery(this).listTolist("select2","select1","move",false);
});
//全部左移
jQuery("#moveleftall").click(function(){
jQuery(this).listTolist("select2","select1","move",true);
});
//上移
jQuery("#moveup").click(function(){
jQuery(this).upOrdown("select2","up");
});
//下移
jQuery("#movedown").click(function(){
jQuery(this).upOrdown("select2","down");
});
//翻转
jQuery("#listreverse").click(function(){
jQuery(this).listReverse("select2");
});
//-------------------------------追加(append)测试:---------------------------
//可供选择双击
jQuery("#select3").dblclick(
function(){
jQuery(this).listTolist("select3","select4","append",false);
});
//已选择项双击
jQuery("#select4").dblclick(
function(){
jQuery(this).listTolist("select4","select3","append",false);
});
//右移
jQuery("#appendright").click(function(){
jQuery(this).listTolist("select3","select4","append",false);
});
//全部右移
jQuery("#appendrightall").click(function(){
jQuery(this).listTolist("select3","select4","append",true);
});
//左移
jQuery("#appendleft").click(function(){
jQuery(this).listTolist("select4","select3","append",false);
});
//全部左移
jQuery("#appendleftall").click(function(){
jQuery(this).listTolist("select4","select3","append",true);
});
//-------------------------------list2list测试::---------------------------
//可供选择双击
jQuery("#select5").dblclick(
function(){
jQuery(this).list2list("select5","select6",false);
});
//已选择项双击
jQuery("#select6").dblclick(
function(){
jQuery(this).list2list("select6","select5",false);
});
//右移
jQuery("#transright").click(function(){
jQuery(this).list2list("select5","select6",false);
});
//全部右移
jQuery("#transrightall").click(function(){
jQuery(this).list2list("select5","select6",true);
});
//左移
jQuery("#transleft").click(function(){
jQuery(this).list2list("select6","select5",false);
});
//全部左移
jQuery("#transleftall").click(function(){
jQuery(this).list2list("select6","select5",true);
});
//-------------------------------moveORdelete测试::---------------------------
//可供选择双击
jQuery("#select7").dblclick(
function(){
jQuery(this).moveOrdelete("select7","select8","move",false);
});
//已选择项双击
jQuery("#select8").dblclick(
function(){
jQuery(this).moveOrdelete("select7","select8","delete",false);
});
//右移
jQuery("#dataright").click(function(){
jQuery(this).moveOrdelete("select7","select8","move",false);
});
//全部右移
jQuery("#datarightall").click(function(){
jQuery(this).moveOrdelete("select7","select8","move",true);
});
//删除
jQuery("#datadelete").click(function(){
jQuery(this).moveOrdelete("select7","select8","delete",false);
});
//全部删除
jQuery("#datadeleteall").click(function(){
jQuery(this).moveOrdelete("select7","select8","delete",true);
});
});
/**
fromid:源list的id.
toid:目标list的id.
moveOrAppend参数("move"或者是"append"):
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.
isAll参数(true或者false):是否全部移动或添加
*/
jQuery.fn.listTolist = function(fromid,toid,moveOrAppend,isAll){
if(moveOrAppend.toLowerCase() == "move"){//移动
if(isAll == true){//全部移动
jQuery("#"+fromid +"> option").each(function(){
jQuery(this).appendTo(jQuery("#"+toid+":not(:has(option["+jQuery(this).val()+"]))"));
});
jQuery("#"+fromid).empty(); //清空源list
}else if(isAll == false){
jQuery("#"+fromid+"> option:selected").each(function(){
//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.
jQuery(this).appendTo(jQuery("#"+toid+":not(:has(option[value="+jQuery(this).val()+"]))"));
});
//目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.
if(jQuery("#"+fromid+" option[value="+jQuery(this).val()+"]").length > 0){
jQuery("#"+fromid).get(0).removeChild(
jQuery("#"+fromid+" option[value="+jQuery(this).val()+"]").get(0));
}
}
}else if(moveOrAppend.toLowerCase() == "append"){
if(isAll == true){
jQuery("#"+fromid +"> option").each(function(){
$("<option></option").val($(this).val()).text($(this).text()).appendTo(jQuery("#"+toid+":not(:has(option["+jQuery(this).val()+"]))"));
});
}else if(isAll == false){
jQuery("#"+fromid+"> option:selected").each(function(){
$("<option></option>").val($(this).val()).text($(this).text()).appendTo(jQuery("#"+toid+":not(:has(option[value="+jQuery(this).val()+"]))"));
});
}
}
}
/**
功能大体同上("move").
不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除.
isAll参数(true或者false):是否全部移动或添加
*/
jQuery.fn.list2list = function(fromid,toid,isAll){
if(isAll == true){
jQuery("#"+fromid+" > option").each(function(){
jQuery(this).appendTo(jQuery("#"+toid+":not(:has(option[value="+jQuery(this).val()+"]))"));
});
}else if(isAll == false){
jQuery("#"+fromid+"> option:selected").each(function(){
jQuery(this).appendTo(jQuery("#"+toid+":not(:has(option[value="+jQuery(this).val()+"]))"));
});
}
}
/**
fromid:源list的id.
toid:目标list的id.
moveOrdelete参数("move"或者是"delete"):
move -- 源list中选中的option不会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.
delete -- 删除选中的选项
isAll参数(true或者false):是否全部移动或删除
*/
jQuery.fn.moveOrdelete = function(fromid,toid,moveOrdelete,isAll){
if(moveOrdelete.toLowerCase() == "move"){
if(isAll == true){
jQuery("#"+fromid+" > option").each(function(){
$("<option></option").val($(this).val()).text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}else if(isAll == false){
jQuery("#"+fromid+" >option:selected").each(function(){
$("<option></option>").val($(this).val()).text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
}else if(moveOrdelete.toLowerCase() == "delete"){
if(isAll == true){
jQuery("#"+toid).empty(); //清空list
}else if(isAll == false){
jQuery("#"+toid+" > option:selected").remove();//清空选中
}
}
}
/**
上下移动
排序：顺序，倒序
*/
jQuery.fn.upOrdown = function(ojbid,upOrdown){
if(upOrdown.toLowerCase() == "up"){
var loc = jQuery("#"+ojbid).get(0).selectedIndex;
if(loc == 0 || loc == -1){
return;
}
var uploc = loc -1;
jQuery("#"+ojbid+" >option[index="+uploc+"]").before(
jQuery("#"+ojbid+" >option:selected")
);
}else if(upOrdown.toLowerCase() == "down"){
var loc = jQuery("#"+ojbid).get(0).selectedIndex;
var olength = jQuery("#"+ojbid+" >option").length;
var sellen = jQuery("#"+ojbid+" >option:selected").length;
var totallength = loc+sellen;
if(olength < totallength ){
return;
}
var downloc = loc +sellen;
jQuery("#"+ojbid+" >option[index="+downloc+"]").after(
jQuery("#"+ojbid+" >option:selected")
);
}
}
/**
顺序翻转
*/
jQuery.fn.listReverse = function(ojbid){
jQuery("#"+ojbid+" >option").reverse();
}
</script>
<body>
<fieldset>
<legend>
移动(move)测试:
</legend>
<table width="400" cellspacing="0" cellpadding="0" align="center"
border="1">
<thead>
<tr>
<th>
可供选择
</th>
<th>
已选择内容
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="select1" style="width: 200px" size="10"
multiple="true">
<option value="1">
number 1
</option>
<option value="2">
number 2
</option>
<option value="3">
number 3
</option>
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
<option value="7">
number 7
</option>
<option value="8">
number 8
</option>
<option value="9">
number 9
</option>
<option value="10">
number 10
</option>
<option value="11">
number 11
</option>
</select>
</td>
<td>
<select id="select2" style="width: 200px" size="10"
multiple="true">
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button id="moveright">
右移
</button>
<button id="moverightall">
全部右移
</button>
<button id="moveleft">
左移
</button>
<button id="moveleftall">
全部左移
</button>
<button id="moveup">
上移
</button>
<button id="movedown">
下移
</button>
<button id="listreverse">
翻转
</button>
</td>
</tr>
</tfoot>
</table>
</fieldset>
<fieldset>
<legend>
追加(append)测试:
</legend>
<table width="400" cellspacing="0" cellpadding="0" align="center"
border="1">
<thead>
<tr>
<th>
可供选择
</th>
<th>
已选择内容
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="select3" style="width: 200px" size="10"
multiple="true">
<option value="1">
number 1
</option>
<option value="2">
number 2
</option>
<option value="3">
number 3
</option>
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
<option value="7">
number 7
</option>
<option value="8">
number 8
</option>
<option value="9">
number 9
</option>
<option value="10">
number 10
</option>
<option value="11">
number 11
</option>
</select>
</td>
<td>
<select id="select4" style="width: 200px" size="10"
multiple="true">
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button id="appendright">
右移
</button>
<button id="appendrightall">
全部右移
</button>
<button id="appendleft">
左移
</button>
<button id="appendleftall">
全部左移
</button>
</td>
</tr>
</tfoot>
</table>
</fieldset>
<fieldset>
<legend>
list2list测试:
</legend>
<table width="400" cellspacing="0" cellpadding="0" align="center"
border="1">
<thead>
<tr>
<th>
可供选择
</th>
<th>
已选择内容
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="select5" style="width: 200px" size="10"
multiple="true">
<option value="1">
number 1
</option>
<option value="2">
number 2
</option>
<option value="3">
number 3
</option>
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
<option value="7">
number 7
</option>
<option value="8">
number 8
</option>
<option value="9">
number 9
</option>
<option value="10">
number 10
</option>
<option value="11">
number 11
</option>
</select>
</td>
<td>
<select id="select6" style="width: 200px" size="10"
multiple="true">
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button id="transright">
右移
</button>
<button id="transrightall">
全部右移
</button>
<button id="transleft">
左移
</button>
<button id="transleftall">
全部左移
</button>
</td>
</tr>
</tfoot>
</table>
</fieldset>
<fieldset>
<legend>
moveordelete测试:
</legend>
<table width="400" cellspacing="0" cellpadding="0" align="center"
border="1">
<thead>
<tr>
<th>
可供选择
</th>
<th>
已选择内容
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="select7" style="width: 200px" size="10"
multiple="true">
<option value="1">
number 1
</option>
<option value="2">
number 2
</option>
<option value="3">
number 3
</option>
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
<option value="7">
number 7
</option>
<option value="8">
number 8
</option>
<option value="9">
number 9
</option>
<option value="10">
number 10
</option>
<option value="11">
number 11
</option>
</select>
</td>
<td>
<select id="select8" style="width: 200px" size="10"
multiple="true">
<option value="4">
number 4
</option>
<option value="5">
number 5
</option>
<option value="6">
number 6
</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button id="dataright">
右移
</button>
<button id="datarightall">
全部右移
</button>
<button id="datadelete">
删除
</button>
<button id="datadeleteall">
全部删除
</button>
</td>
</tr>
</tfoot>
</table>
</fieldset>
</body>
</html>