这篇文章主要介绍了jQuery如何实现左右两个列表框的内容相互移动功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体如下：
在jQuery中将左右两个列表框的内容相互移动，移动的同时进行删除，这里只是给大家写一个入门的小案例，今后写相同的功能思路也是一样的。仅供新手们的一个参考。希望能给那些跟我一样在菜鸟路上不断奋斗的人一些灵感，尽早入门。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表数据移动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//将左边数据移动到右边
$("#right").click(function(){
//将左边option中选中的值赋给vSelect变量
var vSelect=$("#leftSelect option:selected");
//将数据添加到rightSelect中
vSelect.clone().appendTo("#rightSelect");
//同时删除leftSelect中的数据
vSelect.remove();
});
//将右边数据移动到左边
$("#left").click(function(){
var vSelect=$("#rightSelect option:selected");
//将右边的数据追加到左边列表中
vSelect.clone().appendTo("#leftSelect");
vSelect.remove();
});
//将左边全部数据移到右边
$("#rightAll").click(function(){
$("#rightSelect").append($("#leftSelect>option"));
$("#leftSelect>option").remove();
});
//将右边数据全部移到左边
$("#leftAll").click(function(){
$("#leftSelect").append($("#rightSelect>option"));
$("#rightSelect>option").remove();
});
});
</script>
</head>
<body>
<div>
<select id="leftSelect" multiple="multiple" >
<option value="0">电影0</option>
<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>
</select>
<input type="button" id="right" value=">" />
<input type="button" id="rightAll" value=">>>" />
<input type="button" id="left" value="<" />
<input type="button" id="leftAll" value="<<<" />
<select id="rightSelect" multiple="multiple" >
<option value="6">电影6</option>
<option value="7">电影7</option>
<option value="8">电影8</option>
<option value="9">电影9</option>
</select>
</div>
</body>
</html>这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可看到如下运行效果：
jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery如何实现左右两个列表框的内容相互移动功能”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
