两种方法使用jquery实现左右移动效果（包含each遍历方式）
2012-03-21 21:29
1221 查看
第一种：使用each()遍历方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现左右选择器</title>
</head>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//遍历元素
$("option").each(function (index,domEle){
$(domEle).click(function (){
conStr=$(this);
$("#right").click(function (){
conStr.appendTo(".right");
});
$("#left").click(function (){
conStr.appendTo(".left");
});
});
});
});
</script>
<body>
<table width="200" border="0">
<caption>选项卡</caption>
<tr>
<td><select multiple="multiple" class="left" style="width:100px; height:200px">
<option>苹果</option>
<option>香蕉</option>
<option>草莓</option>
<option>梨</option>
</select>
</td>
<td align="center">
<input type="button" value="向右" id="right"><br><br>
<input type="button" value="向左" id="left"><br><br>
</td>
<td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>
</tr>
</table>
</body>
</html>
第二种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现左右选择器</title>
</head>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//给向右按钮添加onclick事件
$("#right").click(function (){
//选中目标元素追加到左边
$(".left option:selected").appendTo(".right");
});
//给向左按钮添加onclick事件
$("#left").click(function (){
//选中目标元素追加到右边
$(".right option:selected").appendTo(".left");
});
});
</script>
<body>
<table width="200" border="0">
<caption>选项卡</caption>
<tr>
<td><select multiple="multiple" class="left" style="width:100px; height:200px">
<option>苹果</option>
<option>香蕉</option>
<option>草莓</option>
<option>梨</option>
</select>
</td>
<td align="center">
<input type="button" value="向右" id="right"><br><br>
<input type="button" value="向左" id="left"><br><br>
</td>
<td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现左右选择器</title>
</head>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//遍历元素
$("option").each(function (index,domEle){
$(domEle).click(function (){
conStr=$(this);
$("#right").click(function (){
conStr.appendTo(".right");
});
$("#left").click(function (){
conStr.appendTo(".left");
});
});
});
});
</script>
<body>
<table width="200" border="0">
<caption>选项卡</caption>
<tr>
<td><select multiple="multiple" class="left" style="width:100px; height:200px">
<option>苹果</option>
<option>香蕉</option>
<option>草莓</option>
<option>梨</option>
</select>
</td>
<td align="center">
<input type="button" value="向右" id="right"><br><br>
<input type="button" value="向左" id="left"><br><br>
</td>
<td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>
</tr>
</table>
</body>
</html>
第二种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现左右选择器</title>
</head>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//给向右按钮添加onclick事件
$("#right").click(function (){
//选中目标元素追加到左边
$(".left option:selected").appendTo(".right");
});
//给向左按钮添加onclick事件
$("#left").click(function (){
//选中目标元素追加到右边
$(".right option:selected").appendTo(".left");
});
});
</script>
<body>
<table width="200" border="0">
<caption>选项卡</caption>
<tr>
<td><select multiple="multiple" class="left" style="width:100px; height:200px">
<option>苹果</option>
<option>香蕉</option>
<option>草莓</option>
<option>梨</option>
</select>
</td>
<td align="center">
<input type="button" value="向右" id="right"><br><br>
<input type="button" value="向左" id="left"><br><br>
</td>
<td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用jquery实现上下左右移动效果
- 如何使用JQuery和HTML5 Canvas两种方法实现弹幕效果:
- jQuery使用$.each遍历json数组的简单实现方法
- jQuery使用$.each遍历json数组的简单实现方法
- jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
- jquery.form.js实现将form提交转为ajax方式提交的使用方法
- 使用jquery的sortable插件实现拖动效果，以及影响blur事件触发的解决方法
- jQuery实现百度图片移入移出内容提示框上下左右移动的效果
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果【转】
- JSP+jquery使用ajax方式调用json的实现方法
- 基于jQuery实现图片推拉门动画效果的两种方法
- 【jQuery】使用slideToggle()方法实现图片“变脸”效果
- 两种方法使用js读写cookie实现一个底部广告浮层效果
- jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
- 使用回调和Promise两种方法实现3个小球依次移动
- JSP+jquery使用ajax方式调用json的实现方法
- 使用eval函数来解析json对象，并且使用jquery的each方法来遍历
- jquery循环遍历中add\each\andSelf\eq\filter\map\slice方法的使用