jQuery实现左右两个列表框的内容相互移动功能示例
更新时间：2019年01月27日 12:01:42 作者：猫屎不是咖啡
这篇文章主要介绍了jQuery实现左右两个列表框的内容相互移动功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了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" style="height: 200px;width: 200px;">
<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" style="height: 200px;width: 200px;">
<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相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
通过实例比较一下使用 XMLHttpRequest和使用fetch之间的不同，这篇文章主要介绍了你不需要jQuery(三) 新AJAX方法fetch()2016-06-06
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
这篇文章主要介绍了Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结,本文总结的比较简洁直白,看到的朋友按需索取,需要的朋友可以参考下2015-04-04
jQuery实现点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面2013-10-10
这篇文章主要介绍了jQuery中parent()方法用法,实例分析了parent()方法的功能、定义及取得紧邻父元素的使用技巧,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jquery请求servlet实现ajax异步请求的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文主要分享了jQuery+HTML5弹出创意搜索框层的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了jQuery防止重复绑定事件的解决方法,结合实例形式分析了jQuery的重复绑定问题与相应的解决方法,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery中outerWidth()方法用法,实例分析了outerWidth()方法的功能、定义及获取第一个匹配元素外部宽度的使用技巧,需要的朋友可以参考下2015-01-01
JQuery下的Live方法和$.browser方法使用代码
网站做好了，老师却要求要3级菜单，无奈只好去做3级菜单了。这次3级菜单的思路是在原有不变的基础上，对有3级菜单的ID，选择进入新的一个控件。在这个新的控件里用ajax去请求其3级目录里的东西。2010-06-06
jquery插件开发基础：开发jQuery 插件的基本格式,开发全局函数的基本格式，接下来为您详细介绍，感兴趣的朋友可以了解哦2013-01-01
最新评论