一款jQuery左右文字双向列表选择器插件,可以点选左右任意内容移动到相反列表里面,也可以在输入框内容输入自己想要的内容来筛选过滤,也可左右全部互换移动。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791