效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-duallistbox/bootstrap-duallistbox.css">
<script src="jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
<title>列表</title>
</head>
<body>
<div class="col-md-7">
<form id="test">
<select multiple="multiple" name="list" id="list">
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option selected value="5">5</option>
<option value="6">6</option>
<option selected value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option selected value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option selected value="15">15</option>
<option value="16">16</option>
<option selected value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<button id="button" type="button" class="btn btn-large btn-block btn-default">提交</button>
</form>
</div>
<script>
// 设置
$('#list').bootstrapDualListbox({
nonSelectedListLabel: '已有角色',
selectedListLabel: '未有角色',
preserveSelectionOnMove: 'moved',
moveOnSelect: false, //出现一个剪头，表示可以一次选择一个
//nonSelectedFilter: '1', //nonSelectedFilter的过滤器
//selectedFilter: '2', //nonSelectedFilter的过滤器
// bootstrap2Compatible: true,
filterTextClear: '展示所有',
moveSelectedLabel: "添加",
moveAllLabel: '添加所有',
removeSelectedLabel: "移除",
removeAllLabel: '移除所有',
infoText: '共{0}个',
showFilterInputs: false,
})
//方法
$('#button').click(function() {
console.log($('[name="list"]').val()) //打印所选中的值
$('#list').bootstrapDualListbox('destroy') //destroy整个列表
$('#list').bootstrapDualListbox('refresh', true) //destroy整个列表
})
</script>
</body>
</html>
网友评论