<html><head>
	<meta charset="utf-8">
	<title>数据删选组件</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		html,body{width: 100%;height: 100%;font-family: "微软雅黑";background: #b1b1b1;}
		ul,li{list-style: none;}
		.container{
			width:560px;
			height: 400px;
			padding: 40px 20px;
			background: #fff;
			border-radius: 4px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -280px;
			margin-top: -200px;
		}
		.container ul.data-list{width: 40%;height: 100%;border: 1px solid #e5e5e5;float: left;}
		.container ul.data-list li{line-height: 32px;padding: 0px 10px;}
		.container ul.data-list li:hover{ background-color: #C5EFFF; color: #252525; cursor: pointer; font-weight: bold; }
		.container ul.data-list li.selected{ background-color: #0095E8; color: #fff; }
		.button-box{float: left;width: 19%;height: 50%;margin-top: 20%;}
		.button-box button{
			background: none;
			font-size: 16px;
			border: 1px solid #818181;
			color: #359bf5;height: 36px;
			line-height: 36px;width: 80%;
			margin: 10px auto;
			display: block;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">

		<ul class="data-list" id="lList">
			<li>第一行选择文字1</li>
			<li>第二行选择文字2</li>
			<li>第三行选择文字3</li>
			<li>第四行选择文字4</li>
			<li>第五行选择文字5</li>
			<li>第六行选择文字6</li>
			<li>第一行选择文字7</li>
			<li>第二行选择文字8</li>
		</ul>

		<div class="button-box">
			<button type="button" name="button" id="add">添 加</button>
			<button type="button" name="button" id="remove">删 除</button>
		</div>
		<ul class="data-list" id="rList">

		</ul>

	</div>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var lList = $("#lList");
			var llList = document.getElementById("lList");
			var rList = $("#rList");
			var items = $(".data-list li");
			for(var i = 0;i<items.length;i++){
				items[i].onclick = itemsclick;
				items[i].ondblclick = itemsdblclick;
			}
			function itemsdblclick(){
				if (this.parentNode === llList) {
					rList.append(this);
				}else{
					lList.append(this);
				}
			}
			function itemsclick(){
				var classname = this.className;
				if(classname === "selected"){
					this.className = "";
				}else{
					this.className="selected";
				}
			}
			function itemsMove(){
				var items = $(".data-list li.selected");
				for(var i = 0;i<items.length;i++){
					if(this.id === "add"){
						rList.append(items[i]);
					}else{
						lList.append(items[i]);
					}
				}
			}
			$("#add").on("click",itemsMove);
			$("#remove").on("click",itemsMove);
		});

	</script>

</body></html>

　　

分享一个jquery实现的双向选择组件的更多相关文章

  1. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...

  2. 分享一个jQuery动态网格布局插件：Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  3. 分享一个jquery插件,弥补一下hover事件的小小不足

    hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...

  4. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  5. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  6. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  7. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  8. 分享一个 jquery serializeArray()序列化方法

    http://www.365mini.com/page/jquery-serializearray.htm http://www.365mini.com/diy.php?f=jquery-serial ...

  9. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

随机推荐

  1. iview 分页的案例

    //html部分 //js部分

  2. 最小生成树（MST） prim（) 算法 kruskal（）算法 A - 还是畅通工程

    某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离. 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可),并要求铺设的公 ...

  3. SSD-2（代码部分介绍）

    single shot multibox detectior tensorflow 代码 一.SSD重要参数设置 在ssd_vgg_300.py文件中初始化重要的网络参数,主要有用于生成默认框的特征层 ...

  4. CentOS7.3 下开放防火墙的端口

    CentOS 7.3默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1:关闭firewall: systemctl stop firewalld.service system ...

  5. mysql每个表总的索引大小

    /* 指定的数据库 每个表的索引 不包含主键索引的大小*/ ,),,),'mb') as index_size from information_schema.tables where TABLE_S ...

  6. etTimeout来实现setInterval

    etTimeout来实现setInterval <script type="text/javascript"> function interval(func, w, t ...

  7. ArcGIS api for javascript——查找任务-在地图上查找要素

    描述 本例展示了如何使用查找任务搜索数据.本例在地图上用图表显示结果并用DojoX的grid格式化结果为表格样式. FindTask构造函数需要一个ArcGIS Server地图服务的URL.本例使用 ...

  8. ArcGIS api for javascript——鼠标悬停时显示信息窗口

    描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...

  9. 找出BST里面与Target最接近的n个数

    http://www.cnblogs.com/jcliBlogger/p/4771342.html 这里给了两种解法,一种是利用C++的priority_queue,然后逐个node输入. 另一种是先 ...

  10. C++语言笔记系列之十——静态成员

    1.静态成员 (1)由keywordstatic修饰 静态变量定义语句在编译阶段就运行,运行过程中不再运行. (2)分类:静态数据成员.静态成员函数. (3)静态成员时类的全部对象共享的成员,而不是某 ...