页面的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>