jQuery左右文字双向列表选择器插件

来源:https://www.sucaihuo.com/js/3085.html 2017-09-24 17:09浏览(3358) 收藏

一款jQuery左右文字双向列表选择器插件,可以点选左右任意内容移动到相反列表里面,也可以在输入框内容输入自己想要的内容来筛选过滤,也可左右全部互换移动。
jQuery左右文字双向列表选择器插件
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源: 58 下载资源 下载积分: 20 积分

页面的head部分,需引入bootstrap样式库和列表选择插件样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/doublebox-bootstrap.css" />
<style type="text/css">
.ue-container {
	width: 60%;
	margin: 0 auto;
	margin-top: 3%;
	padding: 20px 40px;
	border: 1px solid #ddd;
	background: #fff;
}
</style>

页面的body部分,仅需设置好一个指定的容器即可,代码如下:

<!-- 页面结构 -->
<div class="ue-container">
	<select multiple="multiple" size="10" name="doublebox" class="demo"></select>
</div>

页面的底部,需引入jQuery库、bootstrap库和列表选择插件,并对指定元素启用插件设置好相关参数,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/doublebox-bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var demo2 = $('.demo').doublebox({
		nonSelectedListLabel: '愿望清单一',
		selectedListLabel: '愿望清单二',
		preserveSelectionOnMove: 'moved',
		moveOnSelect: false,
		nonSelectedList:[{"roleId":"1","roleName":"健康"},{"roleId":"2","roleName":"快乐"},{"roleId":"3","roleName":"财富"}],
		selectedList:[{"roleId":"4","roleName":"自由"},{"roleId":"5","roleName":"幸福"},{"roleId":"6","roleName":"感恩"}],
		optionValue:"roleId",
		optionText:"roleName",
		doubleMove:true,
	});
})
</script>
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 板凳
    03-05 22:39
    j***h
    效果挺不错的,研究下
  • 头像 椅子
    12-22 18:47
    S***O
    值得研究
  • 头像 沙发
    10-25 15:02
    p***p
    可以,我用的上
1 2