JAVA构建左右两个列表框_jQuery实现左右两个列表框的内容相互移动功能示例

本文实例讲述了jQuery实现左右两个列表框的内容相互移动功能。分享给大家供大家参考，具体如下：

在jQuery中将左右两个列表框的内容相互移动，移动的同时进行删除，这里只是给大家写一个入门的小案例，今后写相同的功能思路也是一样的。仅供新手们的一个参考。希望能给那些跟我一样在菜鸟路上不断奋斗的人一些灵感，尽早入门。

www.jb51.net jQuery列表数据移动

$(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();

});

});

电影0

电影1

电影2

电影3

电影4

电影5

电影6

电影7

电影8

电影9

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可看到如下运行效果：

希望本文所述对大家jQuery程序设计有所帮助。